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>
