使用Ajaxupload.js上传文件

版权声明：本文为博主原创文章，未经博主允许不得转载。

ajaxupload.js 是一款使用jQuery上传文件的js插件，对于简单的文件上传，足够可以应付。

该插件主要有以下几个选项：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

settings = { action: 'upload.PHP', //要提交的地址 name: 'userfile',//参数名次 data: {},//和文件一起提交的其它参数 autoSubmit: true,//选中文件后是否就提交 responseType: false,//返回的相应格式，如果是text格式的，会在响应前后加上一个<pre></pre>标签 hoverClass: 'hover', disabledClass: 'disabled', onChange: function(file, extension){//在选中了文件的时候触发 }, onSubmit: function(file, extension){//在提交的时候触发 }, onComplete: function(file, response){//上传结束的时候触发 } }

你可以使用非自动提交的方式上传文件。
代码示例如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

var ajaxupload =new AjaxUpload($("#uploadFile_button"),{ action: "upload.action", type:"POST", data:{}, autoSubmit:false, responseType:"json", name:'file', onChange: function(file, ext){ if(ext && (/^(xls)$/.test(ext) )){ alert("只支持xls格式的文件"); } },   onComplete: function(file, resp){ alert("上传成功"); } });

以上代码绑定了id=uploadFile_button的html元素，只要点击它，就会弹出选择文件的对话框。

当选中了文件，你就可以手动触发它上传文件，当然你也可以在正式提交前设置一些参数。

1 2	ajaxupload.setData({id,"1"}); ajaxupload.submit();

注意：当在chrome浏览器下面，该插件存在一个bug 就是重复选择相同的文件，onChange方法不会触发多次，
ajaxupload.js只适合简单的文件上传的场景，并没有显示速度的功能，也无法显示进度。
虽然该插件已经很久不再更新，但是使用简单，也有一些人一直在用。
如果你需要更强大的上传功能，ajaxupload.js可能不太适合你。

[java] view plain copy

print ?

1. <span style="font-family:宋体;">// Servlet</span>  
2.   
3. package com.my.servlet;  
4.   
5. import java.io.File;  
6. import java.io.IOException;  
7. import java.io.PrintWriter;  
8. import java.util.List;  
9.   
10. import javax.servlet.ServletException;  
11. import javax.servlet.http.HttpServlet;  
12. import javax.servlet.http.HttpServletRequest;  
13. import javax.servlet.http.HttpServletResponse;  
14.   
15. import org.apache.commons.fileupload.FileItem;  
16. import org.apache.commons.fileupload.FileUploadException;  
17. import org.apache.commons.fileupload.disk.DiskFileItemFactory;  
18. import org.apache.commons.fileupload.servlet.ServletFileUpload;  
19.   
20.   
21. /** 
22.  * Servlet implementation class FileUploadServlet 
23.  */  
24. public class FileUploadServlet extends HttpServlet {  
25.     private static final long serialVersionUID = 1L;  
26.          
27.     /** 
28.      * @see HttpServlet#HttpServlet() 
29.      */  
30.     public FileUploadServlet() {  
31.         super();  
32.         // TODO Auto-generated constructor stub  
33.     }  
34.   
35.     /** 
36.      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 
37.      */  
38.     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
39.           
40.         doPost(request, response);  
41.     }  
42.   
43.     /** 
44.      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 
45.      */  
46.     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
47.           
48.         response.setContentType("text/html;charset=utf-8");  
49.         PrintWriter out= response.getWriter();  
50.         //得到上传文件的路径  
51.         String savePath = this.getServletContext().getRealPath("/img");  
52.           
53.         DiskFileItemFactory  dfif = new DiskFileItemFactory();  
54.           
55.         ServletFileUpload sfu = new ServletFileUpload(dfif);  
56.          String newFileName="";  
57.         try {  
58.             List<FileItem> list  =sfu.parseRequest(request);  
59.               
60.             for(FileItem  file :list ){  
61.                 if(file.isFormField()){  
62.                       System.out.println(file.getFieldName()+"  "+file.getString());  
63.                 }else{  
64.                     //得到上传文件的名称  
65.                   String filename = file.getName();  
66.                   //取得后缀  
67.                   String ext =filename.substring(filename.lastIndexOf("."));  
68.                   //System.out.println(ext);  
69.                   newFileName = System.currentTimeMillis()+ext;  
70.                   //得到保存的全名  
71.                   savePath = savePath+File.separator+newFileName;  
72.                     
73.                   try {  
74.                     file.write(new File(savePath));  
75.                 } catch (Exception e) {  
76.                     // TODO Auto-generated catch block  
77.                     e.printStackTrace();  
78.                 }  
79.                     
80.                 }     
81.             }  
82.               
83.         } catch (FileUploadException e) {  
84.             // TODO Auto-generated catch block  
85.             e.printStackTrace();  
86.         }  
87.           
88.           
89.           
90.         out.print("{'newfileName':'"+newFileName+"'}");  
91.           
92.           
93.           
94.           
95.     }  
96.   
97. }  

// Servlet

package com.my.servlet;

import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;


/**
 * Servlet implementation class FileUploadServlet
 */
public class FileUploadServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public FileUploadServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		doPost(request, response);
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out= response.getWriter();
	    //得到上传文件的路径
		String savePath = this.getServletContext().getRealPath("/img");
		
        DiskFileItemFactory  dfif = new DiskFileItemFactory();
		
		ServletFileUpload sfu = new ServletFileUpload(dfif);
		 String newFileName="";
		try {
			List<FileItem> list  =sfu.parseRequest(request);
			
			for(FileItem  file :list ){
			    if(file.isFormField()){
			    	  System.out.println(file.getFieldName()+"  "+file.getString());
			    }else{
			    	//得到上传文件的名称
			      String filename = file.getName();
			      //取得后缀
			      String ext =filename.substring(filename.lastIndexOf("."));
			      //System.out.println(ext);
			      newFileName = System.currentTimeMillis()+ext;
			      //得到保存的全名
			      savePath = savePath+File.separator+newFileName;
			      
			      try {
					file.write(new File(savePath));
				} catch (Exception e) {
					// TODO Auto-generated catch block
					e.printStackTrace();
				}
			      
			    }	
			}
			
		} catch (FileUploadException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		
		
		out.print("{'newfileName':'"+newFileName+"'}");
		
		
		
		
	}

}

// JS

[javascript] view plain copy

print ?

1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
2.     pageEncoding="UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
4. <html>  
5. <head>  
6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
7. <title>Insert title here</title>  
8. <script type="text/javascript" src="JS/jquery-3.1.0.min.js"></script>  
9. <script type="text/javascript" src="JS/ajaxupload.3.6.js"></script>  
10. <script type="text/javascript">  
11.   $(function(){  
12.       //alert(111);  
13.      var ajax =  new AjaxUpload($("#uploadBtn"),{  
14.           action:"FileUploadServlet",   
15.            type:"POST",  
16.            data:{"myname":"mytest"},  
17.            autoSubmit:false,  
18.            responseType:"json",  
19.           /*  name:'myfile', */  
20.            onChange: function(file, ext){  
21.             if(!(ext && /^(jpg|gif|bmp)$/.test(ext))){  
22.                 alert("只支持jpg | bmp| gif");  
23.                 return false;   
24.               }else{  
25.                   
26.                   ajax.submit();   
27.                     
28.               }  
29.            },  
30.            onComplete: function(file, data){  
31.               // alert(response.test);  
32.               $("#show").html("<img  src='img/"+data.newfileName+"' style='width:200px;height:200px;'/>");  
33.            }  
34.        });  
35.         
36.   });  
37.   
38. </script>  
39. </head>  
40. <body>  
41.   
42.  <div id="show" ></div>  
43.   
44.  <button id="uploadBtn">上传</button>  
45.   
46. </body>  
47. </html>