js实现多文件上传

首先，将以下js代码放入页面这里我判断的是只能上传xls格式的文件，可以根据自己的需求修改js中的checkExcel方法

[javascript] view plain copy

1. </pre><prename="code"class="javascript"><scripttype="text/javascript">
2. var__FILE_INDEX=0;//文件标识
3. var__LOADING_TIP_DIV=null;
4. var__ICON_PATH="<%=Request.ApplicationPath%>/Images";
5. /**
6. *对选择的文件进行格式校验,只能选择xls格式的文件
7. */
8. functioncheckFile(fileObj){
9. varobjSpan=document.getElementById("span_"+fileObj.id);
10. if(!checkExcel(fileObj.value)){
11. objSpan.innerHTML="<imgtitle='错误'src='"+__ICON_PATH+"/check_error.png'border='0'></img><fontstyle='color:red;font-size:12px'>只能导入xls格式文件！</font>"
12. fileObj.errFlag=true;
13. }else{
14. objSpan.innerHTML="<imgtitle='正确'src='"+__ICON_PATH+"/check_right.png'border='0'></img>"
15. fileObj.errFlag=false;
16. }
17. if(fileObj.value!=""&&fileObj.noDelete!="true"){
18. document.getElementById("del_"+fileObj.id).innerHTML="<spantitle='删除文件'οnclick='deleteFile(\""+fileObj.id+"\")'style='font-size:12px;color:#4684b2;cursor:pointer;border-bottom:1pxsolid#4684b2'>删除</span>";
19. }
20. }
22. /**
23. *删除选择的文件
24. */
25. functiondeleteFile(fileId){
26. vartrNode=document.getElementById("tr_"+fileId);
27. vartrParent=trNode.parentNode;
28. trParent.removeChild(trNode);
29. }
31. /**
32. *excel校验函数
33. */
34. functioncheckExcel(filePath){
35. varsubfix=filePath.substring(filePath.lastIndexOf(".")+1);
36. if(subfix!="xls"){
37. returnfalse;
38. }
39. returntrue;
40. }
41. /**
42. *文件上传时的校验逻辑
43. */
44. functionexcelUpload(){
45. varfileCount=0;
46. varfiles=document.getElementsByTagName("INPUT");
47. for(vari=0;i<files.length;i++){
48. if(files[i].type.toLowerCase!='file')continue;
49. if(files[i].errFlag){
50. alert("导入的文件只能是xls格式，请重新选择.");
51. files[i].focus();
52. return;
53. }
54. if(files[i].value!="")
55. fileCount++;
56. }
57. if(fileCount<1){
58. alert("请先选择要上传的数据文件!");
59. return;
60. }
61. document.getElementById("uploadExcelForm").submit();
62. }
63. /**
64. *添加文件
65. */
66. functionaddFile(){
67. ++__FILE_INDEX;
68. varfileId="file"+__FILE_INDEX;
69. varuploadTable=document.getElementById("tableUploadFile")
70. vartrElement=uploadTable.insertRow(-1);
71. trElement.id="tr_"+fileId;
72. vartdElement=trElement.insertCell(-1);
73. tdElement.id="td_"+fileId;
74. tdElement.innerHTML="<inputtype='file'name='"+fileId+"'id='"+fileId+"'size='30'style='padding-left:5px;width:300px;cursor:pointer;'>"
75. +"<spanid='span_"+fileId+"'></span>"
76. +"<spanid='del_"+fileId+"'></span>";
77. }
78. </script>

接下来是后台代码：

[csharp] view plain copy

1. //保存上传文件
2. try
3. {
4. for(inti=0;i<Request.Files.Count;i++)
5. {
6. if(Request.Files["file"+i]!=null)
7. {
8. HttpPostedFilefilePost=Request.Files["file"+i];
9. stringfilename=filePost.FileName;
10. Randomrd=newRandom();
11. filename=filename.Substring(filename.LastIndexOf('\\')+1);
12. stringsavePath=Server.MapPath("UpLoadFile/"+rd.Next()+filename);
13. filePost.SaveAs(savePath);
14. UpLoadFileupLoadfile=newUpLoadFile();
15. upLoadfile.FileObj=mubiao.Obj_Id;
16. upLoadfile.FileAddr=savePath;
17. upLoadfile.FileUpLoadDate=DateTime.Now;
18. newUpLoadFileBLL().InsertUpLoadFile(upLoadfile);
19. }
20. }
21. }
22. catch(Exception)
23. {
24. PageMessageBoxShow("文件上传失败！");
25. }