ajaxFileUpload文件上传

浏览数：26 / 时间：2015年06月09日

一、简介

　　ajaxFileUpload是一种异步的文件上传控件，通过ajax进行文件上传，并获取上传处理结果。在很多时候我们需要使用到文件上传的功能，但是不需要使用那些强大的上传插件。此时就可以使用ajaxFileUpload。它基于jquery，本质是使用iframe完成上传。下载地址为：下载。

二、实例　　

　　网页代码如下：

 1 <%@ page contentType="text/html; charset=UTF-8"%>
 2 <!DOCTYPE html>
 3 <html>
 4 <head>
 5 <title>文件上传</title>
 6 </head>
 7 <body>
 8   <div>
 9         <form id="formItem">
10             <div id="contentTable" style="border:0px;">
11                 <h1 class="title" style="font-size:15px;border-bottom:1pxsolid#DFE3E6;">excel文件上传</h1>
12                 <table width="80%">
13                 <tr>
14                     <td width="30%" align="right">
15                     选择要上传的excel文件
16                     </td>
17                     <td width="70%" style="text-align:center;">
18                     <input type="file" id="file1" name="file"/>
19                     </td>
20                 </tr>
21                 </table>
22                 <div>
23                     <input type="button" value="导入&nbsp;"/>
24                 </div>
25             </div>
26         </form>
27   </div>
28 <scriptsrc="${pageContext.request.contextPath}/res/js/jquery-1.9.1.min.js"type="text/javascript"></script>
29 <scriptsrc="${pageContext.request.contextPath}/res/js/ajaxfileupload.js"></script>
30 <scripttype="text/javascript">
31 var flag=false;
32 $(function(){
33   //文件类型过滤
34   $(":button").click(function(){
35       varfilepath = $("#file1").val();
36       vararr = new Array();
37       arr = filepath.split(".");
38       var fileType = new Array(["xls"],["xlsx"]);
39       for(var i = 0; i < fileType.length; i++){
40           if(arr[1] == fileType[i]){
41               flag = true;
42           }
43       }
44       if(flag){
45           ajaxFileUpload();
46       }else{
47           alert("请选择excel文件上传")
48           return false;
49       }
50   })
51 });
52     
53 functionajaxFileUpload(){
54   $.ajaxFileUpload
55   (
56     {
57       url : ‘${pageContext.request.contextPath}/file/upload.action‘,//用于文件上传的服务器端请求地址
58       secureuri : false,//一般设置为false
59       fileElementId : ‘file1‘,//文件上传空间的id属性
60       dataType : ‘json‘,//返回值类型一般设置为json
61       success : function(data,status)//服务器成功响应处理函数
62       {
63           if(data){
64               alert("上传成功！");
65               $("#file1").val("");
66           }
67         flag = false;
68       },
69       error : function(data,status,e)//服务器响应失败处理函数
70       {
71         alert(e);
72       }
73     }
74   )
75   return false;
76 }
77 </script>
78 </body>
79 </html>

　　服务器端代码如下：

    /**
    *使用springmvc进行文件上传处理
    */
    @RequestMapping("upload")
    @ResponseBody
    public boolean upload(HttpServletRequest request, HttpServletResponse response ) throws UnsupportedEncodingException
    {
        String path = request.getSession().getServletContext().getRealPath("");
        Calendar calendar = Calendar.getInstance();
        calendar.setTime(new Date());
        request.setCharacterEncoding("UTF-8");
        path = String.format("%s%s%s\\%s\\%s\\%s", path, "file", "upload", calendar.get(calendar.YEAR),
                calendar.get(calendar.MONTH), calendar.get(calendar.DAY_OF_MONTH));
        File filepath = new File(path);
        if (!filepath.exists()) {
            filepath.mkdirs();
        }

        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
        // 获得文件
        MultipartFile multipartFile = multipartRequest.getFile("file"); 
        String filename = multipartFile.getOriginalFilename();
        OutputStream os = null;
        InputStream is = null;
        File uploadFile = null;
        try {
            is = multipartFile.getInputStream();
            if (is != null) {
                uploadFile = new File(filepath, System.currentTimeMillis() + ".xls");
                os = new FileOutputStream(uploadFile);
                IOUtils.copy(is, os);
                os.flush();
            }
        } catch (IOException e) {
            e.printStackTrace(); 
            return false;
        } finally {
            IOUtils.closeQuietly(os);
            IOUtils.closeQuietly(is);
        }  
        return true;
    }