如何实现多个文件的上传
一般怎么实现,后台怎么反馈进度给前端以实现进度条的功能。
讲讲实现原理~
我现在的方法:渣到不行 抛砖引玉吧
html:
<table id="imageUploadtable">
<tr>
<td><a onclick="addFile()" style="cursor:pointer">点击添加文件</a></td>
</tr>
<tr id="tr_file0">
<td>证件类型:</td>
<td><select id="documenttype0" name="documenttype0"></select> </td>
<td><input type="file" id="file0" name="file0"/><span id="span_file0"></span><span id="del_file0"></span></td>
</tr>
</table>
JS:
var __FILE_INDEX =0;
function addFile() {
++__FILE_INDEX;
var fileId = "file" + __FILE_INDEX;
var uploadTable = document.getElementById("imageUploadtable")
var trElement = uploadTable.insertRow(-1);
trElement.id = "tr_" + fileId;
var tdElement = trElement.insertCell(-1);
tdElement.id = "td_" + fileId;
tdElement.innerHTML = "<input type='file' name='" + fileId + "' id='" + fileId + "' size='30' style='padding-left:5px;width:300px;cursor:pointer;' >"
+ "<span id='span_" + fileId + "'></span>"
+ "<span id='del_" + fileId + "'></span>";
var lasttrid = "file" + (__FILE_INDEX-1).toString();
document.getElementById("del_" + lasttrid).innerHTML = "<span title='删除文件' onclick='deleteFile(\"" + lasttrid + "\")' style='font-size:12px;color: #4684b2;cursor:pointer;border-bottom:1px solid #4684b2'>删除</span>";
}
function deleteFile(fileId) {
var trNode = document.getElementById("tr_" + fileId);
var trParent = trNode.parentNode;
trParent.removeChild(trNode);
}
C#:
for (int i = 0; i < Request.Files.Count; i++)
{
if (Request.Files[i] != null)
{
HttpPostedFile filePost = Request.Files[i];
string filename = filePost.FileName;
Random rd = new Random();
filename = filename.Substring(filename.LastIndexOf('\\') + 1);
string savePath = Server.MapPath("UpLoadFile/" + rd.Next() + filename);
filePost.SaveAs(savePath);
}
}
一个下拉框跟一个file控件如何对应起来,
request.File[i]索引是按何种顺序索引的?是按前台的html的顺序吗?