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

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

原文链接：https://www.f2er.com/ajax/162897.html

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

猜你在找的Ajax相关文章