HTML file upload | input[type=”file”]

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>

Html file upload example jQuery

HTML file upload

---

Learn HTML/CSS from W3 School Website

• HTML/CSS