ajax上传文件struts2后台接收处理

最新推荐文章于 2022-11-26 00:03:32 发布

置顶木子金丰

最新推荐文章于 2022-11-26 00:03:32 发布

阅读量1.8k

点赞数

本文链接：https://blog.csdn.net/u010509052/article/details/48526713

版权

前段时间由于项目的需求，实现文件上传并要求页面不刷新。我便首先想到了ajax,我通过查阅之前终于可以实现这个功能了，小弟今天特此和大家分享一下。ajax上传实质上分为两种：

一、基于iframe异步提交数据,将form表单数据创建到一个页面隐藏的iframe，提交iframe里的数据。代码如下：

1.html页面引入

<body>
    <h1>Ajax文件上传例子,JAVA版</h1>
    <img id="loading" src="/demo/js/loading.gif" style="display: none;">
     用户名:<input type="text" id="username" name="username"> <br>
   <input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input">
   <button class="button" οnclick="return ajaxFileUpload();">上传</button>
</body>

2.js处理

  $.ajaxFileUpload({
   url : 'upload_upload3.action',   //后台处理的url
   secureuri : false,
   fileElementId : 'fileToUpload', //上传文件控件的id
   dataType : 'json', //数据类型格式
   data : {username : $("#username").val()},
   success : function(data, status) {
    /* if(data.msg) {
     alert(data.msg);
    } */
    $("#loading").hide();
   },
   error : function(data, status, e) {
    alert('上传出错');
   }
  })

return false;
}
</script>

3.struts2后台处理：

@Controller
@Scope("prototype")
public class MyUpload {
private File fileToUpload;
private String username;

public File getFileToUpload() {
return fileToUpload;
}

public String getUsername() {
return username;
}

public void setUsername(String username) {
this.username = username;
}

public void setFileToUpload(File fileToUpload) {
this.fileToUpload = fileToUpload;
}

public void upload3() throws Exception{
      String tmp = UUID.randomUUID().toString()+".xls";   //注意这里文件后缀名我只是以xls演示。
      File filex = new File("f:\\upload");
      File fi = new File(filex,tmp);
     FileUtils.copyFile(file,fi);
}

}

注:源码地址http://download.csdn.net/download/u010509052/9115721

二、基于html5的FileReader,提前是你的浏览器必须支持h5才可以

1.html代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
</head>
<body>
  <input type="file" name="file" id="file"/>
  <input type="button" value="上传" οnclick="upload()"/>
</body>
<script type="text/javascript">
function upload(){
  var resultFile = document.getElementById("file").files[0];
  var reader = new FileReader();
  //reader.readAsDataURL(resultFile);
  reader.readAsBinaryString(resultFile);
  reader.onload = function (e) {
   var urlData = this.result;  //这里的urldata是二进制数据
   $.post("upload_uploadimg.action",{'urlData':urlData},function(data){
    alert("sss");
   });
  }

}

</script>
</html>

2.struts2后台处理

@Controller
@Scope("prototype")
public class MyUpload {

private String urlData;

public String getUrlData() {
return urlData;
}

public void setUrlData(String urlData) {
this.urlData = urlData;
}

public void uploadimg() throws Exception{
  byte[] buf = urlData.getBytes("ISO8859_1"); //根据自己的服务器的编码而定，utf-8或GBK,否则生成的文件的编码不对。
  OutputStream out = new FileOutputStream(new File("f://xxx.jpg"));//这里的文件后缀名后天从前台传过来，我这里就写死了。
  out.write(buf);
  out.flush();
  out.close();
  System.out.println(urlData+"=====>");
}

}

木子金丰

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax上传文件struts2后台接收处理

前段时间由于项目的需求，实现文件上传并要求页面不刷新。我便首先想到了ajax,我通过查阅之前终于可以实现这个功能了，小弟今天特此和大家分享一下。ajax上传实质上分为两种：一、基于iframe异步提交数据,将form表单数据创建到一个页面隐藏的iframe，提交iframe里的数据。代码如下：
复制链接

扫一扫