js实现多文件上传
首先,将以下js代码放入页面这里我判断的是只能上传xls格式的文件,可以根据自己的需求修改js中的checkExcel方法
- </pre><prename="code"class="javascript"><scripttype="text/javascript">
- var__FILE_INDEX=0;//文件标识
- var__LOADING_TIP_DIV=null;
- var__ICON_PATH="<%=Request.ApplicationPath%>/Images";
- /**
- *对选择的文件进行格式校验,只能选择xls格式的文件
- */
- functioncheckFile(fileObj){
- varobjSpan=document.getElementById("span_"+fileObj.id);
- if(!checkExcel(fileObj.value)){
- objSpan.innerHTML="<imgtitle='错误'src='"+__ICON_PATH+"/check_error.png'border='0'></img><fontstyle='color:red;font-size:12px'>只能导入xls格式文件!</font>"
- fileObj.errFlag=true;
- }else{
- objSpan.innerHTML="<imgtitle='正确'src='"+__ICON_PATH+"/check_right.png'border='0'></img>"
- fileObj.errFlag=false;
- }
- if(fileObj.value!=""&&fileObj.noDelete!="true"){
- document.getElementById("del_"+fileObj.id).innerHTML="<spantitle='删除文件'onclick='deleteFile(\""+fileObj.id+"\")'style='font-size:12px;color:#4684b2;cursor:pointer;border-bottom:1pxsolid#4684b2'>删除</span>";
- }
- }
- /**
- *删除选择的文件
- */
- functiondeleteFile(fileId){
- vartrNode=document.getElementById("tr_"+fileId);
- vartrParent=trNode.parentNode;
- trParent.removeChild(trNode);
- }
- /**
- *excel校验函数
- */
- functioncheckExcel(filePath){
- varsubfix=filePath.substring(filePath.lastIndexOf(".")+1);
- if(subfix!="xls"){
- returnfalse;
- }
- returntrue;
- }
- /**
- *文件上传时的校验逻辑
- */
- functionexcelUpload(){
- varfileCount=0;
- varfiles=document.getElementsByTagName("INPUT");
- for(vari=0;i<files.length;i++){
- if(files[i].type.toLowerCase!='file')continue;
- if(files[i].errFlag){
- alert("导入的文件只能是xls格式,请重新选择.");
- files[i].focus();
- return;
- }
- if(files[i].value!="")
- fileCount++;
- }
- if(fileCount<1){
- alert("请先选择要上传的数据文件!");
- return;
- }
- document.getElementById("uploadExcelForm").submit();
- }
- /**
- *添加文件
- */
- functionaddFile(){
- ++__FILE_INDEX;
- varfileId="file"+__FILE_INDEX;
- varuploadTable=document.getElementById("tableUploadFile")
- vartrElement=uploadTable.insertRow(-1);
- trElement.id="tr_"+fileId;
- vartdElement=trElement.insertCell(-1);
- tdElement.id="td_"+fileId;
- tdElement.innerHTML="<inputtype='file'name='"+fileId+"'id='"+fileId+"'size='30'style='padding-left:5px;width:300px;cursor:pointer;'>"
- +"<spanid='span_"+fileId+"'></span>"
- +"<spanid='del_"+fileId+"'></span>";
- }
- </script>
接下来是后台代码:
- //保存上传文件
- try
- {
- for(inti=0;i<Request.Files.Count;i++)
- {
- if(Request.Files["file"+i]!=null)
- {
- HttpPostedFilefilePost=Request.Files["file"+i];
- stringfilename=filePost.FileName;
- Randomrd=newRandom();
- filename=filename.Substring(filename.LastIndexOf('\\')+1);
- stringsavePath=Server.MapPath("UpLoadFile/"+rd.Next()+filename);
- filePost.SaveAs(savePath);
- UpLoadFileupLoadfile=newUpLoadFile();
- upLoadfile.FileObj=mubiao.Obj_Id;
- upLoadfile.FileAddr=savePath;
- upLoadfile.FileUpLoadDate=DateTime.Now;
- newUpLoadFileBLL().InsertUpLoadFile(upLoadfile);
- }
- }
- }
- catch(Exception)
- {
- PageMessageBoxShow("文件上传失败!");
- }