ajaxfileupload上传文件

发布时间：2020-12-16 01:40:59 所属栏目：百科来源：网络整理

导读：1、ajaxfileupload.jsp %@pagecontentType="text/html;charset=UTF-8"language="java"%%Stringpath=request.getContextPath();%htmlheadtitleuploadifive-demo/titlescriptsrc="${pageContext.request.contextPath}/jslib/uploadifive-v1.2.2-standard/jquer

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)SyntaxError:missing;beforestatement
--检查URL路径是否可以访问
2)SyntaxError:syntaxerror
--检查处理提交操作的JSP文件是否存在语法错误
3)SyntaxError:invalidpropertyid
--检查属性ID是否存在
4)SyntaxError: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%webappsYourWebProjectupload文件夹中
//这里实现文件上传操作用的是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:Developapache-tomcat-6.0.36webappsAjaxFileUploadupload愤怒的小鸟.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;
}
})

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!