jquery之ajaxfileupload异步上传插件
由于项目需求,在处理文件上传时需要使用到文件的异步上传。这里使用JqueryAjaxFileUploader这个组件下载地址:http://www.phpletter.com/download_project_version.php?version_id=6 服务器端采用struts2来处理文件上传。 所需环境: jquery.js ajaxfileupload.js struts2所依赖的jar包 及struts2-json-plugin-2.1.8.1.jar 编写文件上传的Actionpackage com.ajaxfile.action; importjava.io.File; importjava.io.FileInputStream; importjava.io.FileOutputStream; importorg.apache.struts2.ServletActionContext; importcom.opensymphony.xwork2.ActionSupport; @SuppressWarnings("serial") publicclassFileActionextendsActionSupport{ privateFilefile; privateStringfileFileName; privateStringfileFileContentType; privateStringmessage="你已成功上传文件"; publicStringgetMessage(){ returnmessage; } publicvoidsetMessage(Stringmessage){ this.message=message; } publicFilegetFile(){ returnfile; } publicvoidsetFile(Filefile){ this.file=file; } publicStringgetFileFileName(){ returnfileFileName; } publicvoidsetFileFileName(StringfileFileName){ this.fileFileName=fileFileName; } publicStringgetFileFileContentType(){ returnfileFileContentType; } publicvoidsetFileFileContentType(StringfileFileContentType){ this.fileFileContentType=fileFileContentType; } @SuppressWarnings("deprecation") @Override publicStringexecute()throwsException{ Stringpath=ServletActionContext.getRequest().getRealPath("/upload"); try{ Filef=this.getFile(); if(this.getFileFileName().endsWith(".exe")){ message="对不起,你上传的文件格式不允许!!!"; returnERROR; } FileInputStreaminputStream=newFileInputStream(f); FileOutputStreamoutputStream=newFileOutputStream(path+"/"+this.getFileFileName()); byte[]buf=newbyte[1024]; intlength=0; while((length=inputStream.read(buf))!=-1){ outputStream.write(buf,0,length); } inputStream.close(); outputStream.flush(); }catch(Exceptione){ e.printStackTrace(); message="对不起,文件上传失败了!!!!"; } returnSUCCESS; } } struts.xml <?xmlversion="1.0"encoding="UTF-8"?> <!DOCTYPEstrutsPUBLIC"-//ApacheSoftwareFoundation//DTDStrutsConfiguration2.1//EN""http://struts.apache.org/dtds/struts-2.1.dtd"> <struts> <packagename="struts2"extends="json-default"> <actionname="fileUploadAction"class="com.ajaxfile.action.FileAction"> <resulttype="json"name="success"> <paramname="contentType"> text/html </param> </result> <resulttype="json"name="error"> <paramname="contentType"> text/html </param> </result> </action> </package> </struts> 注意结合Action观察struts.xml中result的配置。contentType参数是一定要有的,否则浏览器总是提示将返回的JSON结果另存为文件,不会交给ajaxfileupload处理。这是因为struts2 JSON Plugin默认的contentType为application/json,而ajaxfileupload则要求为text/html。 |
文件上传的jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="js/jquery.js"></script>
<scripttype="text/javascript"src="js/ajaxfileupload.js"></script>
<scripttype="text/javascript">
functionajaxFileUpload()
{
$("#loading")
.ajaxStart(function(){
$(this).show();
})//开始上传文件时显示一个图片
.ajaxComplete(function(){
$(this).hide();
});//文件上传完成将图片隐藏起来
$.ajaxFileUpload
(
{
url:'fileUploadAction.action',//用于文件上传的服务器端请求地址
secureuri:false,//一般设置为false
fileElementId:'file',//文件上传空间的id属性<inputtype="file"id="file"name="file"/>
dataType:'json',//返回值类型一般设置为json
success:function(data,status)//服务器成功响应处理函数
{
alert(data.message);//从服务器返回的json中取出message中的数据,其中message为在struts2中action中定义的成员变量
if(typeof(data.error)!='undefined')
{
if(data.error!='')
{
alert(data.error);
}else
{
alert(data.message);
}
}
},
error:function(data,status,e)//服务器响应失败处理函数
{
alert(e);
}
}
)
returnfalse;
}
</script>
</head>
<body>
<imgsrc="loading.gif"id="loading"style="display:none;">
<inputtype="file"id="file"name="file"/>
<br/>
<inputtype="button"value="上传"onclick="returnajaxFileUpload();">
</body>
</html>注意观察<body>中的代码,并没有form表单。只是在按钮点击的时候触发ajaxFileUpload()方法。需要注意的是js文件引入的先后顺序,ajaxfileupload.js依赖于jquery因此你知道的。点我下载工程代码
相关推荐
为了美观,把 type="file" 控件隐藏。点击“上传”按钮,click调用隐藏文件控件,再选择文件。查了一遍,好像是ie为了安全控制,文件的必须鼠标点击过后,才能提交。还没有想到其他的方法。。。
5,success 提交成功后自动执行的处理函数,参数data就是服务器返回的数据。6,error 提交失败自动执行的处理函数。7,data 自定义参数。fileElementId: 'file1',