频道导航

ajaxFileUpload 异步上传文件简单使用

2020-06-27 Ajax 前端之家

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

ajaxFileUpload 异步上传 文件简单使用

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

[html]view plaincopy 
    
 

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楼 抄东西都抄不全，真是醉了，你确定最后你的替换内容有效？白让我找了半天 回复

qq_32901793 2015-11-18 10:169楼 能发我一份吗854580614@qq.com

原文链接：https://www.f2er.com/ajax/160619.html

上一篇：百度分享 ajax 或分页后显示不出问下一篇：ajax异步提交表单

猜你在找的Ajax相关文章

网页的异步请求（Ajax）

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求兼容性问题利用iframe模拟ajax 实现表...

作者：前端之家时间：2021-01-14

手动实现AJAX

AJAX 每日更新前端基础，如果觉得不错，点个star吧 😃 https://github.com/Win...

作者：前端之家时间：2020-12-19

axios异步提交表单数据的不同形式

踩坑Axios提交form表单几种格式前后端分离的开发前后端, 前端使用的vue,后端的安全模块使...

作者：前端之家时间：2020-12-12

php的ajax简单实例

很早就听闻ajax的名声，但是却一直不知道怎么用，今天自己捣鼓了一下，竟然会用了，哈哈哈...

作者：前端之家时间：2020-11-11

Json与Ajax(注册实例）

需要在服务器上进行哈 jquery的ajax方法： // jquery请求 $.ajax({ url: "./serv...

作者：前端之家时间：2020-11-07

jSon和Ajax登录功能，ajax数据交互案例

ajax实例，检测用户与注册检测用户名是否被占用：在用户填写完用户名之后，ajax会异步向...

作者：前端之家时间：2020-11-07

关于AjaxControlToolkit的样式问题

网(LieHuo.Net)教程技术文章一直都是转载的,从来没有自创过.终于遇到AjaxControlToolkit,...

作者：前端之家时间：2020-11-04

一个简单的AJAX实现(HELLO AJAX)

客户端部分： <html> <head> <meta http-equiv="Content-Type" ...

作者：前端之家时间：2020-11-04

AJAX中文乱码的两类问题及解决之策

1）发送路径中的参数有中文，在服务器段接收参数值是乱码例如： var url=”a.jsp?na...

作者：前端之家时间：2020-11-04

实例：AJAX返回xml代码如何在网页中显示

建站学院（LieHuo.Net）文档今天来学习一篇实例代码教程：AJAX返回xml代码如何在网页中显...

作者：前端之家时间：2020-11-04

最新文章