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

时间:2014-11-04 07:25:45

标签: javascript jquery servlets file-upload

需要逐个上传多个文件。假设我在一个范围内选择了几个文件并将它们显示在动态生成表中。我将逐一上传,如此处http://blueimp.github.io/jQuery-File-Upload/

一旦我点击某个特定文件的开头,它就会被上传并返回(RequestDispatcher.include)到同一页面但没有先前选择的文件。 但我需要保留以前请求中未上传的文件。

我在网上找到了答案,但对答案不满意。

我认为可能有用的一些方法是:

1)设置cookie

2)在发送请求之前临时存储所有文件并将这些文件检索回jsp页面。

但我是新手,我对所有答案感到困惑。 请帮帮我。



//onclick funtion triggered after clicking start button

function funIndividual(obj,e){

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

}

//Snippet to generate the dynamic table
$('#document').ready(function(){
	$('#multipleFiles').on('click',function(){
		if(document.getElementById('multipleFiles').value!=""){
	    	$( "#table tr" ).each( function(){
		  		this.parentNode.removeChild( this ); 
			});
			document.getElementById('multipleFiles').value="";
		}
	});
	
	$('#multipleFiles').on('change',function(){
	    var inp = document.getElementById('multipleFiles');	    	    
	    var table = document.getElementById("table");
	 	for (var i = 0; i < inp.files.length; ++i){	
	 		var fileSize = "";
			var name = inp.files.item(i).name;		  
			
			fileSize = bytesToSize(inp.files.item(i).size);
			var row = table.insertRow(0);
			row.style.backgroundColor = "#FFFFFF";
			row.style.borderBottom ="solid thin gainsboro";
			row.id='trid';
			
			
			var cell1 = row.insertCell(0);
			cell1.style.width = '10px';
			cell1.style.textAlign ="";
			
			var cell2 = row.insertCell(1);
			cell2.style.width = '400px';
			cell2.style.textAlign ="left";
			
			var cell3 = row.insertCell(2);
			cell3.style.width = '300px';
			cell3.style.textAlign ="center";
			
			var cell4 = row.insertCell(3);
			cell4.style.width = '390px';
			cell4.style.textAlign = "center";
			cell1.innerHTML = "<td><span class='preview'></span></td>";
			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>";
			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>";
			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>";
			
			}

	});
});
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我有同样的问题,试试看这个

link for multiple upload

尝试阅读教程并下载文件,非常简单易于更改: - )