1. 程式人生 > >input file實現多次上傳檔案(不會覆蓋上次上傳的檔案)

input file實現多次上傳檔案(不會覆蓋上次上傳的檔案)

html原生的file多選控制元件:<input class="className" type="file" name="name" accept="image/*" multiple />

存在問題:第一次選擇了n個檔案,第二次選中m個檔案,第二次選擇結束之後,第一次選擇的檔案會被覆蓋掉。導致上傳的內容不包含最後一次之前選擇的檔案。

解決方案:

1.用一個div作為選擇檔案的觸發節點:<div id="uploaderBox" class="weui-uploader__input"></div>

2.給uploaderBox繫結點選事件:點選div動態新增file控制元件(隱藏),給file控制元件繫結change事件(預覽操作等),模擬file控制元件點選事件觸發選擇檔案操作。程式碼如下:

複製程式碼
$("#uploaderBox").on("click", function(e) {
       var newFileInput = "<input id='uploaderInput' type='file' name='name' accept='image/*' multiple />";
       $(this).parent().append($(newFileInput));
       $("#uploaderInput").bind("change", function(e){
             //onFileUploaded(e);預覽等操作
             $(
this).removeAttr("id"); }); $("#uploaderInput").click(); });
複製程式碼
<div id="uploaderBox" class="weui-uploader__input"></div>
<-- <input type="file" name="name" accept="image/*" multiple=""> --> <-- 動態新增的file控制元件 -->