javascript实现简单多文件上传

最新推荐文章于 2025-06-29 11:00:53 发布

原创最新推荐文章于 2025-06-29 11:00:53 发布 · 5.7k 阅读

CC 4.0 BY-SA版权

博客介绍了文件上传的实现。在archiveFile.jsp中，addinput方法动态添加input；action后台通过importFiles接收文件，importFilesFileName获取文件名，调用UploadUtils.uploadFileByFileAndUrl方法上传；UploadUtils是实现上传功能的工具类。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、archiveFile.jsp

addinput方法动态添加input，名字为importFiles，id不同。

<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<%@page session="false"%> 
<%@taglib prefix="s" uri="/struts-tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="<%=request.getContextPath() %>/js/commonTool.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath() %>/css/T_oms_form.css" type="text/css" media="screen"/>
<style type="text/css">
</style>
</head>
<body bgcolor="#ffffff">
<div id="sending" style="filter:alpha(opacity=80);position:absolute;top:35px;left:10px;z-index:10;width:90%;height:301px;display:none">
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
  <tr> 
    <td bgcolor="#104A7B"> 
      <table width="100%" height="300" border="0" cellspacing="2" cellpadding="0">
        <tr> 
           <td bgcolor="#eeeeee" align="center"> 正在上传文件,   请稍候... </td>
        </tr> 
        </table> 
        </td> 
    </tr> 
</table> 
</div>
<form action="<%=request.getContextPath()%>/archiveToSave.action" method="post" enctype="multipart/form-data"  name="form2" id="form2">
   <table width="100%">
   <tr class="trClassT">
  		<td align="center">归档信息</td>
        <td align="right">
        <img src="<%=request.getContextPath() %>/images/closediv.gif" style="cursor:pointer;" height="16" width="16" onclick="backlist();"/>
        </td>
   </tr>
    <input type="hidden" id="psId" name="psId"  readonly="readonly" value="<s:property value="vfp.psId"/>"/>
    <tr>
     <td>姓名：</td>
     <td><input type="text" id="psName" name="psName" readonly="readonly" value="<s:property value="vfp.psName"/>"/></td>
    </tr>
    <tr>
     <td>身份证号：</td>
     <td><input type="text" id="psSfId" name="psSfId" readonly="readonly" value="<s:property value="vfp.psSfId.substring(0,8)+'***'+vfp.psSfId.substring(vfp.psSfId.length()-5)"/>"/></td>
    </tr>
    <tr></tr>
    <tr></tr>
    <s:if test="fileNameList==null||fileNameList.size()<=0">
    <tr>
     <td >附件：</td> 
     <td>
     <input id="importFiles1" type="file" name="importFiles" onchange="changefile();"/>
     <div id="file"></div>
     <br/>
     <input type="button" value="添加上传文件" onclick="addinput(1)"/>
     <input type="button" value="确定" class="btnClass" onclick="javascript:submitForm();"/>
     </td>
    </tr>
   </s:if>  
    <s:else>
    <tr>
     <td >附件：</td> 
     <td>
      <s:iterator value="fileNameList" var="f">
      <input type="button" value="查看" onclick="show('<s:property value="vfp.psId"/>','<s:property value="#f.uname"/>')"/>	
      <input type="button" value="删除" onclick="del('<s:property value="vfp.psId"/>','<s:property value="#f.uname"/>');"/>
      <input type="file" name="importFiles" style="display:none"/>
      <s:property value="#f.fname"/>
      <br/>
      <br/>
     </s:iterator>
     <div id="file"></div>
     <br/>
     <input style="display:none" type="text" id="filesize" value="<s:property value="fileNameList.size()"/>"/>
     <input type="button" value="添加上传文件" onclick="addinput(2)"/>
     <input type="button" value="确定" class="btnClass" onclick="javascript:submitForm();"/>
     </td>
    </tr>
   </s:else> 
   </table>   
</form>

<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery14.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery.validate.js"></script>
<script language="javascript">
function submitForm(){
document.getElementById("sending").style.display= "block";
var truthBeTold = window.confirm("单击“确定”继续。单击“取消”停止。");
	if (truthBeTold) {
	$("#form2").submit();
	}else{
	document.getElementById("sending").style.display= "none";
	}
};

 function changefiles(){
    var self = this.id;
    var File=document.getElementById(""+self);
    var pdfFile=File.value;
	if(pdfFile==null||pdfFile==""){
		alert("请选择要导入的pdf文件");
		return;
	}
	var arr = pdfFile.split(".");  
    var extname = arr[arr.length-1];  
    extname = extname.toLowerCase();
    if(extname != "pdf"){  
         alert("请选择pdf格式文件！"); 
         this.parentNode.parentNode.removeChild(this.parentNode);
         return false;  
     } 
    }
    
function addinput(statu){
    var count =document.getElementById("file").getElementsByTagName("input").length/2;
    if(statu==1){count= count+2;}else{
     var filesize=document.getElementById("filesize").value;
     var count=count+1+parseInt(filesize);
    }
    if(count<6){
    var div = document.getElementById("file");
    var input = document.createElement("input");
    input.type="file";
    input.name="importFiles";
    input.id="importFiles"+count;
    input.onchange =changefiles;
    var del = document.createElement("input");
    del.type="button";
    del.value="删除";
    del.id="del"+count;
    del.onclick = function d(){
        this.parentNode.parentNode.removeChild(this.parentNode);
    };
    var innerdiv = document.createElement("div");
    innerdiv.appendChild(input);
    innerdiv.appendChild(del);
    div.appendChild(innerdiv);
    }else{
     alert("最多上传5个文件!");  
     return false;  
    }
}

function changefile(){
var pdfFile=document.getElementById("importFiles1").value;
	if(pdfFile==null||pdfFile==""){
		alert("请选择要导入的pdf文件");
		return;
	}
	var arr = pdfFile.split(".");  
    var extname = arr[arr.length-1];  
    extname = extname.toLowerCase();
    if(extname != "pdf"){  
         alert("请选择pdf格式文件！");  
         document.getElementById("importFiles1").outerHTML = document.getElementById("importFiles1").outerHTML;
         return false;  
    } 
}

function del(psId,name){
var truthBeTold = window.confirm("单击“确定”继续。单击“取消”停止。");
	if (truthBeTold) {
		var src="<%=request.getContextPath()%>/delArchiveFile.action?psId="+psId+"&&archiveName="+name;
		var frm = window.document.getElementById("form2");
		frm.action = src; 
		frm.submit();
	}
}

function show(psId,name){
var src="<%=request.getContextPath()%>/showArchive.action?psId="+psId+"&&archiveName="+name;
var frm = window.document.getElementById("form2");
frm.action = src; 
frm.submit();
}


function backlist(){
var src="<%=request.getContextPath()%>/omsaction/familyGNames.action?lorf=list";
window.location.href=src; 
}
</script>
</body>
</html>

二、action后台上传保存

importFiles为接收文件，importFilesFileName获取文件真实名字

UploadUtils.uploadFileByFileAndUrl(importFiles,importFilesFileName,psId);为上传文件

	private File [] importFiles;//文件上传
	private String[] importFilesFileName;//上传文件名字
	private List<ArchiveBean> fileNameList;//文件展示列表
	private String archiveName;//单个文件名字
	private String pdfUrl;
   //getset方法
    public File[] getImportFiles() {
		return importFiles;
	}

	public void setImportFiles(File[] importFiles) {
		this.importFiles = importFiles;
	}

	public String[] getImportFilesFileName() {
		return importFilesFileName;
	}

	public void setImportFilesFileName(String[] importFilesFileName) {
		this.importFilesFileName = importFilesFileName;
	}
   public List<ArchiveBean> getFileNameList() {
		return fileNameList;
	}

	public void setFileNameList(List<ArchiveBean> fileNameList) {
		this.fileNameList = fileNameList;
	}

	public String getArchiveName() {
		return archiveName;
	}

	public void setArchiveName(String archiveName) {
		this.archiveName = archiveName;
	}


	/**
	 * 归档保存
	 * @return
	 * @throws Exception
	 */
	public String archiveToSave(){
	  try {	this.vfp=(VFp)super.getInPack().getFamilyInterfaces().getEntityBySerID(VFp.class, this.psId);
	        boolean re=UploadUtils.uploadFileByFileAndUrl(importFiles,importFilesFileName,psId);  
		    if(re){	
				fileNameList=this.getArchiveList(this.psId);
				return "archiveToSaveOk";
			}else { 
			return "archivefail";
			}
		} catch (Exception e) {	
			e.printStackTrace();
			return "archivefail"; 
		}
	}

三、UploadUtils为工具类


  /**
   * 上传文件  
   * @param sourceFile 页面传入的文件
   * @param url 文件保存路径
   * @return
   */
  public static boolean uploadFileByFileAndUrl(File[] importFiles,String[] importFilesFileName,String psId){
	  if(importFiles==null || importFiles.length==0){ return false;}
	    String u=ServletActionContext.getServletContext().getRealPath("/")+"TempFolder/archive/"+psId+"/";
	    File file = new File(u);
	    if (!file.getParentFile().exists()) {file.getParentFile().mkdirs();}
        if(!file.exists()){file.mkdir();}
        try{
		        for (int i = 0; i < importFiles.length; i++) {
					  if(importFiles[i]!=null){ 
					  String n=UUID.randomUUID().toString().replace("-", "").toLowerCase();	 
					  String url =u+n+".pdf";  
					  InputStream is = new FileInputStream(importFiles[i]);  // 设置目标文件   
					  File toFile = new File(url);  // 创建一个输出流   
					  OutputStream os = new FileOutputStream(toFile);   //设置缓存   
					  byte[] buffer = new byte[1024];   
					  int length = 0;    //读取myFile文件输出到toFile文件中   
					  while ((length = is.read(buffer)) > 0) {   
						  os.write(buffer, 0, length);   
					  }   
					  is.close();   //关闭输入流        
					  os.close();   //关闭输出流  
					  
				  String txtUrl=ServletActionContext.getServletContext().getRealPath("/")+"TempFolder/archive/"+psId+"_config.txt";  
                  String content= importFilesFileName[i]+","+n;
				  UploadUtils.WriteTxt(txtUrl, content); 
				}		  
              } 
  	        return true;
		  }catch(Exception e){
			  return false;
		  }     
  }




/**
   * 写入配置文件
   * @param content 追加内容
   * @param url 文件保存路径
   * @return
   */
   public static boolean WriteTxt(String txtUrl,String content) {
	   try {
		   File file = new File(txtUrl);//"E:\\test\\jsonFile\\test.json"     //建立一个File对象
		   if(!file.getParentFile().exists()){//判断该文件的所属文件夹存不存在，不存在则创建文件夹
			   file.getParentFile().mkdirs();
		   }
		   FileWriter fw = new FileWriter(file,true); //创建字符流（使用字节流比较麻烦）
		   BufferedWriter  bw=new BufferedWriter(fw);
		   //判断file是否存在
		   if(!file.exists()){
			   //如果不存在file文件，则创建
			   file.createNewFile();
			   bw.write(content+".pdf");//"[{\"name\":\"你好\"}]"
		       bw.newLine();
		   }else{
			   bw.append(content+".pdf");//如果存在该file，可以根据情况来追加该file文件的内容
			   bw.newLine();
			   }
		   bw.flush();//这里要说明一下，write方法是写入缓存区，并没有写进file文件里面，要使用flush方法才写进去
		   bw.close();//关闭资源
		   fw.close();
		   return true; 
		   } catch (IOException e){
			   e.printStackTrace();
		     return false; 
		 }
	   }