码迷,mamicode.com
首页 > Web开发 > 详细

ajaxFileUpload文件上传

时间:2015-05-04 17:25:59      阅读:206      评论:0      收藏:0      [点我收藏+]

标签:

一、简介

  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;
    }

ajaxFileUpload文件上传

标签:

原文地址:http://www.cnblogs.com/always-online/p/4476158.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!