|
前段时间由于项目的需求，实现文件上传并要求页面不刷新。我便首先想到了ajax,我通过查阅之前终于可以实现这个功能了，小弟今天特此和大家分享一下。ajax上传实质上分为两种：
一、基于iframe异步提交数据,将form表单数据创建到一个页面隐藏的iframe，提交iframe里的数据。代码如下：
1.html页面引入
<script type="text/javascript" src="/demo/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="/demo/js/ajaxfileupload.js"></script>
<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处理
<script type="text/javascript">
function ajaxFileUpload() {
$("#loading").ajaxStart(function() {
$(this).show();
}).ajaxComplete(function() {
$(this).hide();
});
$.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+"=====>"); } } （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
