ajaxFileUpload 异步上传文件简单使用
ajaxFileUpload 异步上传文件简单使用
<%@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"<!--引用ajaxfileupload.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"<!--隐藏file标签-->
- inputid="filetoUpload"style="display:none"type="file"name="upfile"br/>
- >
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;
-
-
- */
- @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拉到底下找到
