您的位置: 首页  >  文章  >  js实现多文件上传

js实现多文件上传

分类: 文章 • 2024-06-26 17:47:46

js实现多文件上传

js实现多文件上传

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


[javascript]view plaincopy
  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='删除文件'onclick='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 plaincopy
  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. }

相关推荐