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

需要逐个上传多个文件。假设我已经选择了几个文件并在动态生成表格中显示它们。我将一个一个上传，就像这里所做的那样http://blueimp.github.io/jQuery-File-Upload/jQuery多文件上传，保留尚未上传的文件

一旦我点击某个特定文件的开始，它就会上传并返回（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 }); 
 
});

来源

2014-11-04 Prashant H

我有同样的问题，尝试看看这个

link for multiple upload

尝试阅读教程和下载文件，非常简单和容易改变： - ）

来源

2014-11-04 07:45:22

答案很有用，但我无法使用PHP和Ajax请求。如果你能看到我添加的代码片段，你可能会清楚的了解代码。 – 2014-11-05 05:51:33

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

回答

相关问题