HTML file upload
HTML File Upload <input type="file"> these are the basic html form elements for uploading attachment or file to a server.
Allow multiple file uploads in HTML forms.
HTML
<div class='form-group'> <label for='inputState'>Select File</label> <div class='input-group input-file' name='Fichier1'> <input type='text' class='form-control' placeholder='No Files Selected' /> <span class='input-group-btn'> <button class='btn btn-choose' type='button'>Browse</button> </span> </div> </div>
JavaScript
<script type = "text/javascript"> function bs_input_file() { $(".input-file").before( function() { if (!$(this).prev().hasClass('input-ghost')) { var element = $("<input type='file' class='input-ghost' style='visibility:hidden; height:0'>"); element.attr("name", $(this).attr("name")); element.change(function() { element.next(element).find('input').val((element.val()).split('\\').pop()); }); $(this).find("button.btn-choose").click(function() { element.click(); }); $(this).find("button.btn-reset").click(function() { element.val(null); $(this).parents(".input-file").find('input').val(''); }); $(this).find('input').css("cursor", "pointer"); $(this).find('input').mousedown(function() { $(this).parents('.input-file').prev().click(); return false; }); return element; } } ); } $(function() { bs_input_file(); }); </script>