浏览时附加多个输入文件上传

Append Multiple input file upload upon browse

本文关键字：输入 文件 浏览      更新时间：2023-09-26

单击浏览按钮时，我正在尝试附加多个文件，但是当我单击浏览按钮并再次选择多个文件时，浏览的文件被重置（消失）或替换为新的多个浏览文件。我正在做类似于 http://jsfiddle.net/aHrTd/4/的事情，但我想一次做多个文件，而不是一次做一个文件

<input id="file-upload-plans" type="file" class="file" multiple="multiple" name="floorplans[]" data-show-upload="false" data-show-caption="false" data-show-remove="true" accept="image/jpeg,image/png" data-browse-class="btn btn-default">

也许这个 http://jsfiddle.net/aHrTd/67/可以帮助你

.HTML 

<form id="upload" action="upload.php" method="POST" enctype="multipart/form-data" onchange="addField();">
<label for="file">Soubor:</label>
<input type="file" name="files[]" class="file" /><br />
<input type="submit" name="Odeslat" value="Odeslat soubor" />
</form>

.JS

$(function(){
    $(document).on('change', '.file', function(){
      var e = $(this);
      if(e.val()){
        e.clone().insertAfter(e);
      }
    });
  });

这是一个工作演示，您可以在那里看到输出。

$("#file").change(function() {
    var result = $(this)[0].files;
    for(var x = 0;x< result.length;x++){
       var file = result[x];
       // here are the files
        $("#output").append("<p>" + file.name + " (TYPE: " + file.type + ", SIZE: " + file.size + ")</p>");  
    }
    
});
p{
  background-color: cyan;
  font-family: open sans;
  max-width: 350px;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" id="file" name="file"  multiple="multiple"/>
<div id="output"></div>

我不是 100% 确定，但您可能可以使用 javascript 保存添加的文件。这里有几个例子。

https://developer.mozilla.org/en-US/docs/Web/API/FileList

相关文章：