jQuery多文件上傳，保留尚未上傳的文件

Question

需要逐個上傳多個文件。假設我已經選擇了幾個文件並在動態生成表格中顯示它們。我將一個一個上傳，就像這裏所做的那樣http://blueimp.github.io/jQuery-File-Upload/

一旦我點擊某個特定文件的開始，它就會上傳並返回（RequestDispatcher.include）到同一頁面但沒有先前選擇的文件。 但我需要保留上次請求中未上傳的文件。

我經歷了網上的答案，但不滿意答案。

一些可能的方法，我認爲這可能是幫助：

1）中設置Cookie

2）存儲所有臨時文件發送請求和檢索這些文件回jsp頁面之前。

但我是一個新手，我對所有的答案感到困惑。 請幫助我。

//onclick funtion triggered after clicking start button 
 

 
function funIndividual(obj,e){ 
 

 
\t var $this = $(obj); 
 
    var rowIndex = $this.closest("tr").index(); 
 
\t var singleFile =$("input[name=hidfileName]").eq(rowIndex).val(); 
 
\t \t $('#strMode').val('UploadInd'); 
 
\t \t $('#singleFile').val(singleFile); 
 
\t \t \t $('#fileupload').attr('action','servleturl'); 
 
\t \t \t $('#fileupload').submit(); 
 
\t \t } 
 

 
}

//Snippet to generate the dynamic table 
 
$('#document').ready(function(){ 
 
\t $('#multipleFiles').on('click',function(){ 
 
\t \t if(document.getElementById('multipleFiles').value!=""){ 
 
\t  \t $("#table tr").each(function(){ 
 
\t \t \t \t this.parentNode.removeChild(this); 
 
\t \t \t }); 
 
\t \t \t document.getElementById('multipleFiles').value=""; 
 
\t \t } 
 
\t }); 
 
\t 
 
\t $('#multipleFiles').on('change',function(){ 
 
\t  var inp = document.getElementById('multipleFiles'); \t  \t  
 
\t  var table = document.getElementById("table"); 
 
\t \t for (var i = 0; i < inp.files.length; ++i){ \t 
 
\t \t \t var fileSize = ""; 
 
\t \t \t var name = inp.files.item(i).name; \t \t 
 
\t \t \t 
 
\t \t \t fileSize = bytesToSize(inp.files.item(i).size); 
 
\t \t \t var row = table.insertRow(0); 
 
\t \t \t row.style.backgroundColor = "#FFFFFF"; 
 
\t \t \t row.style.borderBottom ="solid thin gainsboro"; 
 
\t \t \t row.id='trid'; 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t var cell1 = row.insertCell(0); 
 
\t \t \t cell1.style.width = '10px'; 
 
\t \t \t cell1.style.textAlign =""; 
 
\t \t \t 
 
\t \t \t var cell2 = row.insertCell(1); 
 
\t \t \t cell2.style.width = '400px'; 
 
\t \t \t cell2.style.textAlign ="left"; 
 
\t \t \t 
 
\t \t \t var cell3 = row.insertCell(2); 
 
\t \t \t cell3.style.width = '300px'; 
 
\t \t \t cell3.style.textAlign ="center"; 
 
\t \t \t 
 
\t \t \t var cell4 = row.insertCell(3); 
 
\t \t \t cell4.style.width = '390px'; 
 
\t \t \t cell4.style.textAlign = "center"; 
 
\t \t \t cell1.innerHTML = "<td><span class='preview'></span></td>"; 
 
\t \t \t cell2.innerHTML = "<td align='left'><input type='hidden' id='hidfileName' name='hidfileName' value="+name+"><p class='name'>"+name+"</p><strong class='error text-danger'>"+fileFormatSupported+"</strong></td>"; 
 
\t \t \t cell3.innerHTML = "<td align='center'><p class='size'>"+fileSize+"</p><div style='display:none' id ='progressbar'"+i+" class='progress progress-striped active' role='progressbar' aria-valuemin='0' aria-valuemax='100' aria-valuenow='0'><div class='progress-bar style='display:none' progress-bar-success' style='width:10%;'></div></div></td>"; 
 
\t \t \t cell4.innerHTML = "<td align='center'><span id='btnStartInd"+i+"' name='btnStartInd' class='btn btn-primary start' onclick='javascript:funIndividual(this,event)' "+isValidFile+"><i class='glyphicon glyphicon-upload'></i><span> Start</span></span>&nbsp;<span onclick='javascript:funcancelInd(this,event)' id='btnCancelInd"+i+"' class='btn btn-warning'><i class='glyphicon glyphicon-ban-circle'></i><span> Cancel</span></span></td>"+ "</tr>"; 
 
\t \t \t 
 
\t \t \t } 
 

 
\t }); 
 
});

Answer 1

我有同樣的問題，嘗試看看這個

link for multiple upload

嘗試閱讀教程和下載文件，非常簡單和容易改變： - ）