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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM