如何從一個輸入標籤添加/上傳/選擇多個文件？

我在這裏知道如何從一個輸入標記添加/上傳/選擇多個文件，但是在再次選擇所有先前的選擇之後被刪除或覆蓋。我想要的是。如何從一個輸入標籤添加/上傳/選擇多個文件？

選擇多個文件。（將做預覽，確定這是完成）。
用戶可以從預覽中刪除選擇。
多個文件/圖像添加到當前選擇

來源

2017-04-11 AWE

您可以隱藏輸入[type = file]，並提供與輸入，以便選擇新的文件，並單獨管理的文件列表進行交互的UI。

因此，您可以：

1）添加一個隱藏的輸入<input id="myInput" type="file" multiple style="display:none" />

2）提供，爲了打開提示

調用myInput.click（）按鈕一個漂亮的UI

3）訂閱輸入更改事件並獲取myInput.files並將它們存儲在數組或集合中

4）通過AJAX上傳所有文件只需創建FormData並追加所有文件，然後將FormData實例傳遞給ajax調用（例如：$ ajax（{... data：formData ...}））。

編輯：

Plnkr link

樣的行爲：

按「+添加文件」按鈕，將新文件添加到列表中。
單擊列表中的文件，將刪除該文件
按「發送文件」按鈕，將文件發送到相應的URL

樣本HTML：

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8" /> 
    <title></title> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <script src="script.js"></script> 
    </head> 

    <body> 
    <input id="myInput" type="file" multiple style="display:none" /> 

    <button id="myButton" type="button" style="border-radius: 5px; background-color: #fff; color: green;">+ Add Files</button> 
    <button id="mySubmitButton" type="button" style="border-radius: 5px; background-color: #fff; color: green;">Send Files</button> 

    <div id="myFiles"></div> 
    </body> 

</html>

示例腳本：

$(function(){ 
    let inputFile = $('#myInput'); 
    let button = $('#myButton'); 
    let buttonSubmit = $('#mySubmitButton'); 
    let filesContainer = $('#myFiles'); 
    let files = []; 

    inputFile.change(function() { 
    let newFiles = []; 
    for(let index = 0; index < inputFile[0].files.length; index++) { 
     let file = inputFile[0].files[index]; 
     newFiles.push(file); 
     files.push(file); 
    } 

    newFiles.forEach(file => { 
     let fileElement = $(`<p>${file.name}</p>`); 
     fileElement.data('fileData', file); 
     filesContainer.append(fileElement); 

     fileElement.click(function(event) { 
     let fileElement = $(event.target); 
     let indexToRemove = files.indexOf(fileElement.data('fileData')); 
     fileElement.remove(); 
     files.splice(indexToRemove, 1); 
     }); 
    }); 
    }); 

    button.click(function() { 
    inputFile.click(); 
    }); 

    buttonSubmit.click(function() { 
    let formData = new FormData(); 

    files.forEach(file => { 
     formData.append('file', file); 
    }); 

    console.log('Sending...'); 

    $.ajax({ 
     url: 'https://this_is_the_url_to_upload_to', 
     data: formData, 
     type: 'POST', 
     success: function(data) { console.log('SUCCESS !!!'); }, 
     error: function(data) { console.log('ERROR !!!'); }, 
     cache: false, 
     processData: false, 
     contentType: false 
    }); 
    }); 
});

來源

2017-04-11 15:22:17 andreim

3）訂閱輸入更改事件並獲取myInput.files並將它們存儲在數組或集合中？我很擔心。我們如何存儲數組中的文件的引用？ 4）通過AJAX上傳所有文件只需創建FormData並追加所有文件，然後將FormData實例傳遞給ajax調用？ – AWE

什麼是讓而不是var？ – AWE

檢查[這個答案]（http://stackoverflow.com/questions/762011/whats-the-difference-between-using-let-and-var-to-declare-a-variable）其中很好地描述了這個問題。還要考慮使用const，而不是var。 – andreim

如何從一個輸入標籤添加/上傳/選擇多個文件？

回答

相關問題