List of selected files from file input

Question

I want to list the selected file from file input.

  <div class="fileUpload myButton">
    <span>Upload</span>
    <input type="file" name="imageURL[]" id="imageURL" multiple="" class="file" />
  </div>
    <div id="file-list">
  </div>

I have this code

(function () {
var filesUpload = document.getElementById("imageURL"),z
    fileList = document.getElementById("file-list");

function uploadFile (file) {
    var li = document.createElement("li"),
        div = document.createElement("div"),            
        reader,
        xhr,
        fileInfo;

    li.appendChild(div);

    // Present file info and append it to the list of files
    fileInfo = "<div class=\"neutral\">File: <strong>" + file.name + "</strong> with the size <strong>" + parseInt(file.size / 1024, 10) + "</strong> kb is in queue.</div>";
    div.innerHTML = fileInfo;

    fileList.appendChild(div);
}

function traverseFiles (files) {
    if (typeof files !== "undefined") {
        for (var i=0, l=files.length; i<l; i++) {
            uploadFile(files[i]);
        }
    }
    else {
        fileList.innerHTML = "<div class=\"neutral\">Your browser does not support Multiple File Upload, but you can still upload your file. We recommend you to upload to a more modern browser, like <a href=\"http://google.com/chrome\" target=\"_blank\">Google Chrome</a> for example.<div>";
    }   
}

filesUpload.addEventListener("change", function () {
    traverseFiles(this.files);
}, false);


     })();

But the problem is that the user selects other files that he adds to the list, but the old files do not load when the form is submitted.

---

Simplified: when the user selects file1.pdf and file2.pdf The list shows the files file1.pdf and file2.pdf When he again selects the files file3.pdf and file4.pdf the list shows the files file1.pdf, file2.pdf, file3.pdf and file4.pdf But when it submits the form, only the files file3.pdf and file4.pdf are downloaded

My question is how to remove files that will not be downloaded from the list. OR way to download all the files from the list. Thanks in advance.

Answer 1

, , , , .

1. , change, . . , :

filesUpload.on("change", function () {
    traverseFiles(this.files); //Add initial files to list
    create_new_input();
}
function create_new_input() {
    var new_input = $('<input type="file" />'); //create file selector
    new_input.on("change", function() {traverseFiles($(this).get(0).files);}); //
    $('body').append(new_input); //Add this input to your page
}, false);

, traverseFiles, xhr. jQuery, !

2: :

filesUpload.addEventListener("change", function () {
    document.getElementById('file-list').innerHTML = "";
    traverseFiles(this.files);
}, false);

!

Answer 2

, . , - html, "" .

, html. - .

, , - , html, , ...

html :

<div class="fileUpload myButton">
    <span>Upload</span>
    <input type="file" class="imageUrlInput" name="imageURL[0]" id="imageURL" multiple="" class="file" />
  </div>
    <div id="file-list">
  </div>

Javascript :

function uploadFile (file) {
    var li = document.createElement("li"),
        div = document.createElement("div"),            
        reader,
        xhr,
        fileInfo;

    li.appendChild(div);

    // now here we receive the HTML input element for the files.
    var currentInput = $('#imageURL');
    var imageUrlInputsCount = $('.imageUrlInput').length;
    // now we change the 'id' attribute of said element because id should be unique right?
    currentInput.attr('id','imageUrl_'+imageUrlInputsCount);
    // now, we append a new input element with an incremented array key defined by the length of already existing input elements
    currentInput.append('<input type="file" name="imageURL['+imageUrlInputsCount+']" id="imageURL" multiple="" class="file" />');
    // and finally we hide the old element
    currentInput.hide();

    // Present file info and append it to the list of files
    fileInfo = "<div class=\"neutral\">File: <strong>" + file.name + "</strong> with the size <strong>" + parseInt(file.size / 1024, 10) + "</strong> kb is in queue.</div>";
    div.innerHTML = fileInfo;

    fileList.appendChild(div);
}

, (php/jsp/asp, node.js ) imageURL, imageURL, imageURL. .. imageURL :

imageURL = array (
  0 => array(
    'foo1.pdf',
    'foo2.pdf',
    'foo3.pdf',
  ),
  1 => array(
    'foo4.pdf',
    'foo5.pdf',
    'foo6.pdf',
  )
  3 => array(
    'foo7.pdf',
    'foo8.pdf',
    'foo9.pdf',
  )
)