ajaxFileUpload+Struts2文件上传

前台:

1. 引入ajaxFileUpload.js文件

2. 前台通过input type=file文件的onchange方法去调用上传js代码

<input id="logoPicUrl"  name="logoPicUrl" οnchange="uploadFile(this);" type="file">

如果想在执行ajax代码以后控制文件显示的信息,就需要做隐藏的type=file控件,因为不同浏览器对这个控件支持不一样,显示的信息也不同,我的做法如下:

<input id="logoPicUrl"  name="logoPicUrl"  οnchange="uploadFile(this);" type="file" >
<div >
    <a  href="javascript:void(0)" οnclick='document.getElementById("logoPicUrl").click();'>

        <input id="logoFile" name="model.logoPicUrl"  readonly="true" placeholder="点击选择上传的Logo"/>

   </a>
</div>

  3. js代码

这里面是用document去获取的控件里面的文件,jQuery有时会获取不到,原因不太清楚,如果想改用jQuery请注意一下这个问题。

uploadFile = function(x){
    var logofile = document.getElementById("logoPicUrl").files[0];
    if( logofile instanceof Object) {
        if(x.name=="logoPicUrl"){
            //判断上传文件的类型
            var fileName=logofile.name;
            var fileType=fileName.substring(fileName.lastIndexOf("."),fileName.length); 
            if(!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(fileType)){
                layer.alert("只能上传图片类型");
            $("#logoPicUrl").val("");
            return;
        }
          var requestURL="${contextPath}/groupAction!uploadFile.${actionExtension}";
          $.ajaxFileUpload({
               url: requestURL, 
               secureuri: false, //一般设置为false
               type:'post',
               fileElementId: 'logoPicUrl', // 上传文件的id、name属性名
               dataType:'text',
               cache:false,
               success: function(data, status){$("#logoFile").val(data);},
               error: function(data, status, e){ }
         });
        }
    }
}     

在ajaxFileUpload方法里面,如果要返回数据,要把dataType设置为'text',否则获取的会是DOM或者其他的东西。有时浏览器会有严重的缓存现象,例如你第一次上传了一个图片,第二次重新上传一张,但后台获取的还是第一次上传的文件,这时要把cache设置成false。

后台:使用commons-io包和commons-fileupload包

1.之前查到很多资料说后台想获取要上传的文件,只需要在后台定义一个File类型的文件,名字与前台ajaxFileUpload中指定的fileElementId的type=file控件的name相同(如定义File logoPicUrl),以及两个String类型的用于存储文件名称和类型的字段(String logoPicUrlFileName,logoPicUrlContentType),struts2框架会将文件信息set到这些属性里,也可以直接从request里面取的(注意:从request中取可能会出现中文参数乱码现象,解决办法就是在前台将参数使用js的encodeURI做两次编码,后台用jdk的URLDecoder做一次解码即可解决乱码问题,这是因为struts2本身会做一次解码)。

2.MultiPartRequestWrapper req=(MultiPartRequestWrapper) getRequest();
logoPicUrl = req.getFiles("logoPicUrl")[0];

3.如果是SpringMVC框架直接定义一个MultipartFile 的实例就可以接收到

4.如果想往前台传数据,可以使用writeResponse("想要传送的数据");

 

public void upload(){
    JSONObject jsonObject = new JSONObject();
    MultiPartRequestWrapper req=(MultiPartRequestWrapper) getRequest();

    File userFile = req.getFiles("logoPicUrl")[0];
		
	String path = ServletActionContext.getServletContext().getRealPath("/temp");
	FileInputStream fis;
	FileOutputStream fos;
	String savefileName = logoPicUrlFileName;//这个变量由struts2赋值,声明后要写get set
	// 得到文件保存的位置(根据root来得到文件保存的路径在tomcat下的该工程里)
	File destFile = new File(path, savefileName);
	// is中保存了文件的内容
	try {
		fis = new FileInputStream(userFile);
		fos = new FileOutputStream(destFile);
		// 把文件写入到上面设置的路径里
		byte[] buffer = new byte[512];
		int length = 0;
		while ((length = fis.read(buffer)) != -1) {
			fos.write(buffer, 0, length);
		}
		fis.close();
		fos.close();
	   } catch (FileNotFoundException e) {
			e.printStackTrace();
	   } catch (IOException e) {
			e.printStackTrace();
	   }
}

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值