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

淡淡的烟草味﹌ 2022-08-08 14:50 296阅读 0赞

前段时间由于项目的需求，实现文件上传并要求页面不刷新。我便首先想到了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][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+"=====>");  
 \}  
   
\}

[http_download.csdn.net_download_u010509052_9115721]: http://download.csdn.net/download/u010509052/9115721