Untitled

<html>
<head>
file upload test
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
</head>

<body>
    <div class="container">
        <div class="row files" id="files1">
          <h2>Files 1</h2>
          <span id="file-input-wrapper" class="btn btn-default btn-file">
            Browse <input type="file" id="file-input" name="files1" multiple />
          </span>
          <br />
          <ul class="fileList"></ul>
        </div>
    </div>
<script type="text/javascript">

$.fn.fileUploader = function (filesToUpload) {
    this.closest(".files").change(function (evt) {

        for (var i = 0; i < evt.target.files.length; i++) {
            filesToUpload.push(evt.target.files[i]);
        };
        var output = [];

        for (var i = 0, f; f = evt.target.files[i]; i++) {
            var removeLink = "<a class=\"removeFile\" href=\"#\" data-fileid=\"" + i + "\">Remove</a>";

            output.push("<li><strong>", escape(f.name), "</strong> - ",
                f.size, " bytes. &nbsp; &nbsp; ", removeLink, "</li> ");
        }

        $(this).children(".fileList")
            .append(output.join(""));
    });
};

var filesToUpload = [];

$(document).on("click",".removeFile", function(e){
    e.preventDefault();
    var fileName = $(this).parent().children("strong").text();
     // loop through the files array and check if the name of that file matches FileName
    // and get the index of the match
    for(i = 0; i < filesToUpload.length; ++ i){
        if(filesToUpload[i].name == fileName){
            //console.log("match at: " + i);
            // remove the one element at the index where we get a match
            filesToUpload.splice(i, 1);
        }
    }
    //console.log(filesToUpload);
    // remove the <li> element of the removed file from the page DOM
    $(this).parent().remove();
    var fileInputElement = document.getElementById('file-input');
    fileInputElement.remove();
    $("#file-input-wrapper").append('<input type="file" id="file-input" name="files1" multiple />');
});


$("#files1").fileUploader(filesToUpload);

$("#uploadBtn").click(function (e) {
    e.preventDefault();
});

</script>
</body>
</html>