jquery - Javascript, Uploading multiple files - Stack Overflow

admin管理员组

文章数量:1295727

$(document).ready(function () {
  $(document).on('click', "button", function (e) {
      $(this).closest('tr').remove();
  });
});
var filelist = new Array();

updateList = function () {
  var input = document.getElementById('fileUploader');
  var output = document.getElementById('divFiles');

  var HTML = "<table>";
  for (var i = 0; i < input.files.length; ++i) {
      filelist[i] = input.files.item(i).name;
      HTML += "<tr><td>" + filelist[i] + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
  }

  HTML += "</table>";
  output.innerHTML = HTML;
}

<script src=".1.1/jquery.min.js"></script>

<div class="form-group col-md-2 col-sm-2">
	<label class="label1">
		<img src="~/Images/upload.png" height="50px" width="50px" /> Upload Your File
		<input type="file" name="fileUploader" id="fileUploader" multiple onchange="javascript:updateList()" />
	</label>
</div>
<br />

$(document).ready(function () {
  $(document).on('click', "button", function (e) {
      $(this).closest('tr').remove();
  });
});
var filelist = new Array();

updateList = function () {
  var input = document.getElementById('fileUploader');
  var output = document.getElementById('divFiles');

  var HTML = "<table>";
  for (var i = 0; i < input.files.length; ++i) {
      filelist[i] = input.files.item(i).name;
      HTML += "<tr><td>" + filelist[i] + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
  }

  HTML += "</table>";
  output.innerHTML = HTML;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-group col-md-2 col-sm-2">
	<label class="label1">
		<img src="~/Images/upload.png" height="50px" width="50px" /> Upload Your File
		<input type="file" name="fileUploader" id="fileUploader" multiple onchange="javascript:updateList()" />
	</label>
</div>
<br />

In the code I am uploading multiple files. When I am trying to upload some more files the existing file list replaced with new list. Even after placing my array outside the function.

• javascript
• jquery
• html

Share Improve this question Follow edited Apr 23, 2018 at 9:41 Thum Choon Tat 3,09011 gold badge2323 silver badges2525 bronze badges asked Apr 23, 2018 at 7:25 Kavitha PrabhuKavitha Prabhu 28411 gold badge22 silver badges1111 bronze badges 3

• Please share your html & also show who is calling updateList function – brk Commented Apr 23, 2018 at 7:28
• You replace the array elements by adding them with your index key that starts from zero: filelist[i] = input.files.item(i).name; instead of using something like push. It means that if your first selection has more files than your newest, the last files from the first selection are still in the array, am i right? – Kaddath Commented Apr 23, 2018 at 7:29
• <div class="form-group col-md-2 col-sm-2"> <label class="label1"> <img src="~/Images/upload.png" height="50px" width="50px" /> Upload Your File <input type="file" name="fileUploader" id="fileUploader" multiple onchange="javascript:updateList()" /> </label> <br /> – Kavitha Prabhu Commented Apr 23, 2018 at 7:30

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

If you want to preserve the previously added file names, you should push the file names into filelist.

var filelist = new Array();

updateList = function () {
    var input = document.getElementById('fileUploader');
    var output = document.getElementById('divFiles');

    var HTML = "<table>";
    for (var i = 0; i < input.files.length; ++i) {
        //filelist[i] = input.files.item(i).name;
        filelist.push(input.files.item(i).name);
        HTML += "<tr><td>" 
              + filelist[i] 
              + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
    }
    HTML += "</table>";
    output.innerHTML = HTML;
    console.log(filelist);
}

<input id="fileUploader" type="file" multiple="multiple" onchange="updateList()">
<div id="divFiles"></div>

Please try this,

 <script>
    $(document).ready(function () {
        $(document).on('click', "button", function (e) {
            $(this).closest('tr').remove();
        });
    });
   </script>
   <script>
       var filelist = new Array();

       updateList = function () {
           var input = document.getElementById('fileUploader');
           var output = document.getElementById('divFiles');

           var HTML = "<table>";
           for (var i = 0; i < input.files.length; ++i) {
               filelist[i]=input.files.item(i).name;
               HTML += "<tr><td>" + filelist[i] + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
           }
           HTML += "</table>";
           output.innerHTML += HTML;
       }
   </script>

Use an array to save all files, Each time user select new files, push them into array.

var fileList = [];

in updateList function fill array

fileList.push(...);

var filelist = new Array();

updateList = function () {
    var input = document.getElementById('fileUploader');
    var output = document.getElementById('divFiles');

    var HTML = "<table>";
    for (var i = 0; i < input.files.length; ++i) {
        //filelist[i] = input.files.item(i).name;
        filelist.push(input.files.item(i).name);
        HTML += "<tr><td>" 
              + filelist[i] 
              + "</td><td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button ></button></td></tr>";
    }
    HTML += "</table>";
    output.innerHTML = HTML;
    console.log(filelist);
}

<input id="fileUploader" type="file" multiple="multiple" onchange="updateList()">
<div id="divFiles"></div>

本文标签： jQueryJavascriptUploading multiple filesStack Overflow