频道导航

ajaxFileUpload 异步上传文件简单使用

2020-06-27 Ajax 前端之家

前端之家收集整理的这篇文章主要介绍了ajaxFileUpload 异步上传文件简单使用，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

ajaxFileUpload 异步上传 文件简单使用

原创 2014年07月18日 17:36:26

@H_301_35@

[html] view plain copy

copy 
     
    

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"

pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<htmlheadMetahttp-equiv="Content-Type"content="text/html;charset=UTF-8"title>Inserttitlehere</
scriptsrc="//code.jquery.com/jquery-1.11.0.min.js">scriptscriptsrc="//code.jquery.com/jquery-migrate-1.2.1.min.js"
scriptsrc="../js/ajaxfileupload.js"
scripttype="text/javascript" $(function(){
//点击打开文件选择器
$("#upload").on('click',function(){
$('#fileToUpload').click();
});
//选择文件之后执行上传
$('#fileToUpload').on('change',function(){
$.ajaxFileUpload({
url:'../FileUploadServlet',
secureuri:false,
fileElementId:'fileToUpload',//file标签的id
dataType:'json',//返回数据的类型
data:{name:'logan'},//一同上传的数据
success:function(data,status){
//把图片替换
varobj=jQuery.parseJSON(data);
$("#upload").attr("src","../image/"+obj.fileName);
if(typeof(data.error)!='undefined'){
if(data.error!=''){
alert(data.error);
}else{
alert(data.msg);
}
}
},248); line-height:18px; margin-top:0px!important; margin-right:0px!important; margin-bottom:0px!important; padding:0px 3px 0px 10px!important"> error:function(data,status,e){
alert(e);
});
body
imgid="upload"alt=""style="width:200px;height:200px"
src="http://d.pcs.baidu.com/thumbnail/e8119cd92364a9b2714ea0a92af15aec?fid=2399642819-250528-305026848845811&time=1405674000&sign=FDTAER-DCb740ccc5511e5e8fedcff06b081203-abo3xnZkLb7yMEPLDWiuaQI8kXM%3D&rt=sh&expires=2h&r=900585425&sharesign=unknown&size=c710_u500&quality=100"
inputid="fileToUpload"style="display:none"type="file"name="upfile"br/>
>

[java]copy 
    

packagecom.yangshidesign.weixinface.servlet;

importjava.io.File;
importjava.io.IOException;
importjava.util.List;
importjavax.servlet.ServletContext;
importjavax.servlet.ServletException;
importjavax.servlet.annotation.WebServlet;
importjavax.servlet.http.HttpServlet;
importjavax.servlet.http.HttpServletRequest;
importjavax.servlet.http.HttpServletResponse;
importorg.apache.commons.fileupload.FileItem;
importorg.apache.commons.fileupload.FileUploadException;
importorg.apache.commons.fileupload.disk.DiskFileItemFactory;
importorg.apache.commons.fileupload.servlet.ServletFileUpload;
importcom.alibaba.fastjson.JSONObject;
/**
*ServletimplementationclassFileUploadServlet
*/
@WebServlet("/FileUploadServlet")
publicclassFileUploadServletextendsHttpServlet{
privatestaticfinallongserialVersionUID=1L;
protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{
response.getWriter().println("ppppppppppppppppppp");
voiddoPost(HttpServletRequestrequest,0); background-color:inherit">//需要返回的fileName
StringfileName=null;
//参考资料http://commons.apache.org/proper/commons-fileupload/using.html
//Checkthatwehaveafileuploadrequest
booleanisMultipart=ServletFileUpload.isMultipartContent(request);
//Createafactoryfordisk-basedfileitems
DiskFileItemFactoryfactory=newDiskFileItemFactory();
//Configurearepository(toensureasecuretemplocationisused)
ServletContextservletContext=this.getServletConfig().getServletContext();
Filerepository=(File)servletContext.getAttribute("javax.servlet.context.tempdir");
factory.setRepository(repository);
//Createanewfileuploadhandler
ServletFileUploadupload=newServletFileUpload(factory);
//Parsetherequest
try{
List<FileItem>items=upload.parseRequest(request);
for(FileItemitem:items){
//其他参数
Stringtype=item.getContentType();
if(type==null){
//System.out.println(item.getString(item.getFieldName()));
continue;
//文件参数
fileName=item.getName();
//设置保存文件路径
StringrealPath=request.getServletContext().getRealPath("/image");
Filedir=newFile(realPath);
Filef=newFile(dir,fileName);
if(f.exists()){
f.delete();
f.createNewFile();
//保存
item.write(f);
}catch(FileUploadExceptione){
e.printStackTrace();
catch(Exceptione){
//返回结果
JSONObjectobj=newJSONObject();
obj.put("fileName",fileName);
response.getWriter().print(obj.toJSONString());
}

需要用到的一个js文件：（点击下载）

ajaxfileupload.js

两个jar包：

commons-io-2.4.jar

commons-fileupload-1.3.1.jar

注意：上传成功之后没有执行回调函数。

解决方法：（参考链接：http://www.myexception.cn/ajax/727453.html）

打开ajaxfileupload.js拉到底下找到

[javascript]copy 
    

(type==

"json"

){

eval("data="+data);
}

改成：

copy 
     
    

data=data.replace("<pre>","").replace("</pre>","");

//data=eval("("+data.replace("<pre>","").replace("</pre>","")+")");
}

ma15732625261
2017-03-18 21:2713楼
ajaxFileUpload 异步上传文件简单使用，兼容性不太好
回复

kookkj 2016-10-27 11:1312楼 怒赞 laizhiming1989 2016-01-14 12:0911楼 [html] view plain copy prestyle="word-wrap:break-word;white-space:pre-wrap;"> 这个怎么过滤？ a708856902 2016-01-13 14:5710楼 抄东西都抄不全，真是醉了，你确定最后你的替换内容有效？白让我找了半天 回复