1、ajaxfileupload.jsp
<%@pagecontentType="text/html;charset=UTF-8"language="java"%>
<%
Stringpath=request.getContextPath();
%>
<html>
<head>
<title>uploadifive-demo</title>
<scriptsrc="${pageContext.request.contextPath}/jslib/uploadifive-v1.2.2-standard/jquery.min.js"type="text/javascript"></script>
<scriptsrc="${pageContext.request.contextPath}/jslib/ajaxfileupload/ajaxfileupload.js"type="text/javascript"></script>
<scripttype="text/javascript">
functionajaxFileUpload(){
//开始上传文件时显示一个图片,文件上传完成将图片隐藏
//$("#loading").ajaxStart(function(){$(this).show();}).ajaxComplete(function(){$(this).hide();});
//执行上传文件操作的函数
$.ajaxFileUpload({
//处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
url:'${pageContext.request.contextPath}/userController/fileUpload.do?uname=玄玉',secureuri:false,//是否启用安全提交,默认为false
fileElementId:'myBlogImage',//文件选择框的id属性
dataType:'text',//服务器返回的格式,可以是json或xml等
success:function(data,status){//服务器响应成功时的处理函数
data=data.replace(/<pre.*?>/g,'');//ajaxFileUpload会对服务器响应回来的text内容加上<prestyle="....">text</pre>前后缀
data=data.replace(/<PRE.*?>/g,'');
data=data.replace("<PRE>",'');
data=data.replace("</PRE>",'');
data=data.replace("<pre>",'');
data=data.replace("</pre>",'');//本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
if(data.substring(0,1)==0){//0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
$("img[id='uploadImage']").attr("src",data.substring(2));
$('#result').html("图片上传成功<br/>");
}else{
$('#result').html('图片上传失败，请重试！！');
}
},error:function(data,status,e){//服务器响应失败时的处理函数
$('#result').html('图片上传失败，请重试！！');
}
});
}
</script>
</head>
<body>
<h1>ajaxfileuploadDemo</h1>
<divid="result"></div>
<imgid="uploadImage"src="http://www.firefox.com.cn/favicon.ico">
<inputtype="file"id="myBlogImage"name="myfiles"/>
<inputtype="button"value="上传图片"onclick="ajaxFileUpload()"/>
<!--
AjaxFileUpload简介
官网:http://PHPletter.com/Our-Projects/AjaxFileUpload/
简介:jQuery插件AjaxFileUpload能够实现无刷新上传文件,并且简单易用,它的使用人数很多,非常值得推荐
注意:引入js的顺序(它依赖于jQuery)和页面中并无表单(只是在按钮点击的时候触发ajaxFileUpload()方法)
常见错误及解决方案如下
1)@R_502_156@Error:missing;beforestatement
--检查URL路径是否可以访问
2)@R_502_156@Error:@R_502_156@error
--检查处理提交操作的JSP文件是否存在语法错误
3)@R_502_156@Error:invalidpropertyid
--检查属性ID是否存在
4)@R_502_156@Error:missing}inXMLexpression
--检查文件域名称是否一致或不存在
5)其它自定义错误
--可使用变量$error直接打印的方法检查各参数是否正确,比起上面这些无效的错误提示还是方便很多
-->
</body>
</html>
2、controller.java
/** *这里这里用的是MultipartFile[]myfiles参数,所以前台就要用<inputtype="file"name="myfiles"/> *上传文件完毕后返回给前台[0`filepath],0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述) */ @RequestMapping(value="/fileUpload") publicStringaddUser(@RequestParam("uname")Stringuname,@RequestParamMultipartFile[]myfiles,HttpServletRequestrequest,HttpServletResponseresponse)throwsIOException{ //可以在上传文件的同时接收其它参数 System.out.println("收到用户["+uname+"]的文件上传请求"); //如果用的是Tomcat服务器，则文件会上传到\\%TOMCAT_HOME%\\webapps\\YourWebProject\\upload\\文件夹中 //这里实现文件上传操作用的是commons.io.FileUtils类,它会自动判断/upload是否存在,不存在会自动创建 StringrealPath=request.getSession().getServletContext().getRealPath("/upload"); //设置响应给前台内容的数据格式 response.setContentType("text/plain;charset=UTF-8"); //设置响应给前台内容的PrintWriter对象 PrintWriterout=response.getWriter(); //上传文件的原名(即上传前的文件名字) StringoriginalFilename=null; //如果只是上传一个文件,则只需要MultipartFile类型接收文件即可,而且无需显式指定@RequestParam注解 //如果想上传多个文件,那么这里就要用MultipartFile[]类型来接收文件,并且要指定@RequestParam注解 //上传多个文件时,前台表单中的所有<inputtype="file"/>的name都应该是myfiles,否则参数里的myfiles无法获取到所有上传的文件 for(MultipartFilemyfile:myfiles){ if(myfile.isEmpty()){ out.print("1`请选择文件后上传"); out.flush(); returnnull; }else{ originalFilename=myfile.getOriginalFilename(); System.out.println("文件原名:"+originalFilename); System.out.println("文件名称:"+myfile.getName()); System.out.println("文件长度:"+myfile.getSize()); System.out.println("文件类型:"+myfile.getContentType()); System.out.println("========================================"); try{ //这里不必处理IO流关闭的问题,因为FileUtils.copyInputStreamToFile()方法内部会自动把用到的IO流关掉 //此处也可以使用Spring提供的MultipartFile.transferTo(Filedest)方法实现文件的上传 FileUtils.copyInputStreamToFile(myfile.getInputStream(),newFile(realPath,originalFilename)); }catch(IOExceptione){ System.out.println("文件["+originalFilename+"]上传失败,堆栈轨迹如下"); e.printStackTrace(); out.print("1`文件上传失败，请重试！！"); out.flush(); returnnull; } } } //此时在Windows下输出的是[D:\Develop\apache-tomcat-6.0.36\webapps\AjaxFileUpload\\upload\愤怒的小鸟.jpg] //System.out.println(realPath+"\\"+originalFilename); //此时在Windows下输出的是[/AjaxFileUpload/upload/愤怒的小鸟.jpg] //System.out.println(request.getContextPath()+"/upload/"+originalFilename); //不推荐返回[realPath+"\\"+originalFilename]的值 //因为在Windows下<imgsrc="file:///D:/aa.jpg">能被firefox显示,而<imgsrc="D:/aa.jpg">firefox是不认的 out.print("0`"+request.getContextPath()+"/upload/"+originalFilename); out.flush(); returnnull; }
3、ajaxfileupload.js
jQuery.extend({
createUploadIframe:function(id,uri)
{
//createframe
varframeId='jUploadFrame'+id;
variframeHtml='<iframeid="'+frameId+'"name="'+frameId+'"style="position:absolute;top:-9999px;left:-9999px"';
if(window.ActiveXObject)
{
if(typeofuri=='boolean'){
iframeHtml+='src="'+'javascript:false'+'"';
}
elseif(typeofuri=='string'){
iframeHtml+='src="'+uri+'"';
}
}
iframeHtml+='/>';
jQuery(iframeHtml).appendTo(document.body);
returnjQuery('#'+frameId).get(0);
},createUploadForm:function(id,fileElementId,data)
{
//createform
varformId='jUploadForm'+id;
varfileId='jUploadFile'+id;
varform=jQuery('<formaction=""method="POST"name="'+formId+'"id="'+formId+'"enctype="multipart/form-data"></form>');
if(data)
{
for(variindata)
{
jQuery('<inputtype="hidden"name="'+i+'"value="'+data[i]+'"/>').appendTo(form);
}
}
varoldElement=jQuery('#'+fileElementId);
varnewElement=jQuery(oldElement).clone();
jQuery(oldElement).attr('id',fileId);
jQuery(oldElement).before(newElement);
jQuery(oldElement).appendTo(form);
//setattributes
jQuery(form).css('position','absolute');
jQuery(form).css('top','-1200px');
jQuery(form).css('left','-1200px');
jQuery(form).appendTo('body');
returnform;
},ajaxFileUpload:function(s){
//TODOintroduceglobalsettings,allowingtheclienttomodifythemforallrequests,notonlytimeout
s=jQuery.extend({},jQuery.ajaxSettings,s);
varid=newDate().getTime()
varform=jQuery.createUploadForm(id,s.fileElementId,(typeof(s.data)=='undefined'?false:s.data));
vario=jQuery.createUploadIframe(id,s.secureuri);
varframeId='jUploadFrame'+id;
varformId='jUploadForm'+id;
//Watchforanewsetofrequests
if(s.global&&!jQuery.active++)
{
jQuery.event.trigger("ajaxStart");
}
varrequestDone=false;
//Createtherequestobject
varxml={}
if(s.global)
jQuery.event.trigger("ajaxSend",[xml,s]);
//Waitforaresponsetocomeback
varuploadCallback=function(isTimeout)
{
vario=document.getElementById(frameId);
try
{
if(io.contentWindow)
{
xml.responseText=io.contentWindow.document.body?io.contentWindow.document.body.innerHTML:null;
xml.responseXML=io.contentWindow.document.XMLDocument?io.contentWindow.document.XMLDocument:io.contentWindow.document;
}elseif(io.contentDocument)
{
xml.responseText=io.contentDocument.document.body?io.contentDocument.document.body.innerHTML:null;
xml.responseXML=io.contentDocument.document.XMLDocument?io.contentDocument.document.XMLDocument:io.contentDocument.document;
}
}catch(e)
{
jQuery.handleError(s,xml,null,e);
}
if(xml||isTimeout=="timeout")
{
requestDone=true;
varstatus;
try{
status=isTimeout!="timeout"?"success":"error";
//Makesurethattherequestwassuccessfulornotmodified
if(status!="error")
{
//processthedata(runsthexmlthroughhttpDataregardlessofcallback)
vardata=jQuery.uploadHttpData(xml,s.dataType);
//Ifalocalcallbackwasspecified,fireitandpassitthedata
if(s.success)
s.success(data,status);
//Firetheglobalcallback
if(s.global)
jQuery.event.trigger("ajaxSuccess",s]);
}else
jQuery.handleError(s,status);
}catch(e)
{
status="error";
jQuery.handleError(s,e);
}
//Therequestwascompleted
if(s.global)
jQuery.event.trigger("ajaxComplete",s]);
//HandletheglobalAJAXcounter
if(s.global&&!--jQuery.active)
jQuery.event.trigger("ajaxStop");
//Processresult
if(s.complete)
s.complete(xml,status);
jQuery(io).unbind()
setTimeout(function()
{try
{
jQuery(io).remove();
jQuery(form).remove();
}catch(e)
{
jQuery.handleError(s,e);
}
},100)
xml=null
}
}
//Timeoutchecker
if(s.timeout>0)
{
setTimeout(function(){
//Checktoseeiftherequestisstillhappening
if(!requestDone)uploadCallback("timeout");
},s.timeout);
}
try
{
varform=jQuery('#'+formId);
jQuery(form).attr('action',s.url);
jQuery(form).attr('method','POST');
jQuery(form).attr('target',frameId);
if(form.encoding)
{
jQuery(form).attr('encoding','multipart/form-data');
}
else
{
jQuery(form).attr('enctype','multipart/form-data');
}
jQuery(form).submit();
}catch(e)
{
jQuery.handleError(s,e);
}
jQuery('#'+frameId).load(uploadCallback);
return{abort:function(){}};
},uploadHttpData:function(r,type){
vardata=!type;
data=type=="xml"||data?r.responseXML:r.responseText;
//Ifthetypeis"script",evalitinglobalcontext
if(type=="script")
jQuery.globalEval(data);
//GettheJavaScriptobject,ifJSONisused.
if(type=="json")
eval("data="+data);
//evaluatescriptswithinhtml
if(type=="html")
jQuery("<div>").html(data).evalScripts();
returndata;
}
}) 原文链接：/ajax/162291.html