struts2+ajaxfileupload.js实现多文件上传

潘翊歌

2023-12-01

ajaxfileupload.js是JQuery用来完成文件传输的一个插件，在此之前已经学过关于该插件上传单文件的文章，在此就不多说关于struts2+ajaxfileupload.js所需要的包了。

需要上传多个文件，我的做法是定义多个id不同的input标签，代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>多文件上传</title>  
</head>
<body>
    文件1：<input type="file" name="file" id="file1"><br>
    文件2：<input type="file" name="file" id="file2"><br>
    文件3：<input type="file" name="file" id="file3"><br>
  <input type="button" id="button" value="上传">
</body>
</html>

ajaxfileupload.js本来的js文件只是多余单文件的，现在要用它来上传多个文件，我就对js文件做了一定的修改。

		        var oldElement = jQuery('#' + fileElementId[i]);  
		        var newElement = jQuery(oldElement).clone();  
		        jQuery(oldElement).attr('id', fileId);  
		        jQuery(oldElement).before(newElement);  
		        jQuery(oldElement).appendTo(form);

找到 ajaxfileupload.js文件中的这几行代码，大概在40几行的地方，这里就是把文件中的内容读出来再加到form包中进行传输，它这里只是对一个文件，所以我们现在需要用一个循环来实现多个文件的上传：

		    for(var i in fileElementId){  
		        var oldElement = jQuery('#' + fileElementId[i]);  
		        var newElement = jQuery(oldElement).clone();  
		        jQuery(oldElement).attr('id', fileId);  
		        jQuery(oldElement).before(newElement);  
		        jQuery(oldElement).appendTo(form);  
		    }

这样就把js代码改好了，接下来就要写jQuery代码了：

  $("#button").click(function(){
    $.ajaxFileUpload({  
	    type: "POST",  
	    url: "url",  
	    data:data,//要传到后台的参数，没有可以不写  
	    secureuri : false,//是否启用安全提交，默认为false  
	    fileElementId:['file1','file2','file3'],//文件选择框的id属性  
	    dataType: 'json',//服务器返回的格式  
	    async : false,  
	    success: function(data){  
             alert("上传成功");
	    },  
	    error: function (data, status, e){  
             alert("上传失败");
	    }  
	});
	});

注意：fileElementId的值要把你要上传的文件的id全写到[ ]中去，

前台的工作已经做完了，现在来实现后台struts中的代码：

public class AdminAction extends ActionSupport {
      /**
	 * 
	 */
	private static final long serialVersionUID = 1L;
        private List<File> file;
        private List<String> fileFileName;
        private List<String> fileContentType;

     public String upFile(){
		try{
			String url = ServletActionContext.getServletContext().getRealPath("/upload");
			List<File> curFile=file;
			List<String> curfileFileName=fileFileName;
			file=null;
			fileFileName=null;
			File myFile=new File(url);
                if(!myFile.exists()){
            	    myFile.mkdirs();
                   }
               for(int i=0;i<curFile.size();i++){
            	  FileUtil.copyFile(curFile.get(i), new File(myFile,curfileFileName.get(i)));
                }
	           return SUCCESS;
		}catch(Exception e){
			e.printStackTrace();
			System.out.println("ERROR");
			return ERROR;
		}
	}
}

用是trust2中提供的FileUtil.copyFile()方法吧文件一个一个的保存到指定的位置。

这样就搞定了多文件上传的问题。

struts2+ajaxfileupload.js实现多文件上传

相关阅读

相关文章

相关问答

相关文档