Javascript,上传多个文件

时间:2018-04-23 07:25:15

标签: javascript jquery html



$(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;
}
&#13;
<script src="https://ajax.googleapis.com/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 />
&#13;
&#13;
&#13;

在代码中我上传了多个文件。当我尝试上传更多文件时,现有文件列表替换为新列表。即使将我的数组放在函数之外。 enter image description here

4 个答案:

答案 0 :(得分:2)

如果要保留以前添加的文件名,则应push将文件名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>
Dim ZmAntal As Long

Dim CountryRange As Range, C As Range

Dim Res As Variant 

ZmAntal = Worksheets("Maskinerum").Cells(8, 4).value 

Set CountryRange = Sheets("Zmbistad").Range(Cells(2, 1), Cells(ZmAntal, 1))

For Each C In CountryRange

    Res = "=CONCATENATE(RC[1],RC[14])"

    If Not IsError(Res) Then         

        C.Offset(0, 0).value = Res

    End If

Next C

End Sub

答案 1 :(得分:1)

使用数组保存所有文件,每次用户选择新文件时,将它们推入数组。

var fileList = [];

updateList函数填充数组

fileList.push(...);

答案 2 :(得分:1)

请试试这个,

 <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>

答案 3 :(得分:1)

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>