ajaxFileUpload文件上传

一、简介

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

二、实例　　

　　网页代码如下：

 <%@ page contentType="text/html; charset=UTF-8"%>
 <!DOCTYPE html>
 <html>
 <head>
 <title>文件上传</title>
 </head>
 <body>
   <div>
         <form id="formItem">
             <div id="contentTable" style="border:0px;">
                 <h1 class="title" style="font-size:15px;border-bottom:1pxsolid#DFE3E6;">excel文件上传</h1>
                 <table width="80%">
                 <tr>
                     <td width="30%" align="right">
                     选择要上传的excel文件
                     </td>
                     <td width="70%" style="text-align:center;">
                     <input type="file" id="file1" name="file"/>
                     </td>
                 </tr>
                 </table>
                 <div>
                     <input type="button" value="导入&nbsp;"/>
                 </div>
             </div>
         </form>
   </div>
 <scriptsrc="${pageContext.request.contextPath}/res/js/jquery-1.9.1.min.js"type="text/javascript"></script>
 <scriptsrc="${pageContext.request.contextPath}/res/js/ajaxfileupload.js"></script>
 <scripttype="text/javascript">
 var flag=false;
 $(function(){
   //文件类型过滤
   $(":button").click(function(){
       varfilepath = $("#file1").val();
       vararr = new Array();
       arr = filepath.split(".");
       var fileType = new Array(["xls"],["xlsx"]);
       for(var i = 0; i < fileType.length; i++){
           if(arr[1] == fileType[i]){
               flag = true;
           }
       }
       if(flag){
           ajaxFileUpload();
       }else{
           alert("请选择excel文件上传")
           return false;
       }
   })
 });

 functionajaxFileUpload(){
   $.ajaxFileUpload
   (
     {
       url : '${pageContext.request.contextPath}/file/upload.action',//用于文件上传的服务器端请求地址
       secureuri : false,//一般设置为false
       fileElementId : 'file1',//文件上传空间的id属性
       dataType : 'json',//返回值类型一般设置为json
       success : function(data,status)//服务器成功响应处理函数
       {
           if(data){
               alert("上传成功！");
               $("#file1").val("");
           }
         flag = false;
       },
       error : function(data,status,e)//服务器响应失败处理函数
       {
         alert(e);
       }
     }
   )
   return false;
 }
 </script>
 </body>
 </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;
    }