ajaxFileUpload文件上传-阿里云开发者社区

开发者社区> 烟火_> 正文

ajaxFileUpload文件上传

简介: 一、简介   ajaxFileUpload是一种异步的文件上传控件,通过ajax进行文件上传,并获取上传处理结果。在很多时候我们需要使用到文件上传的功能,但是不需要使用那些强大的上传插件。此时就可以使用ajaxFileUpload。
+关注继续查看

一、简介

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
关于FileZilla上传文件后服务器端文件与本地文件大小不一致的解决方法
最近在调试网站时发现,通过ftp上传工具FileZilla上传至服务器端的文件与本地文件大小不一致,虽然没有影响网站的最终显示效果,但仍让我困惑不解。后发现是传输类型的原因,解决方法如下: 中文版FileZilla菜单栏->传输->传输类型->二进制(Binary) 造成大小不一致的原因:ASCII模式和二进制(Binary)模式的区别是回车换行的处理,Binary模式不对数据进行任何处理,ASCII模式将回车换行转换为本机的回车字符,比如:UNIX下是\n,Windows下是\r\n,Mac下是\r。
1480 0
CV:基于Keras利用cv2+自定义(加载人脸识别xml文件)+keras的load_model(加载表情hdf5、性别hdf5)实现标注脸部表情和性别label
CV:基于Keras利用cv2+自定义(加载人脸识别xml文件)+keras的load_model(加载表情hdf5、性别hdf5)实现标注脸部表情和性别label
46 0
C# 使用FileUpload控件上传图片,将文件转换成二进制进行存储与读取
状况描述:   需要上传文件,但是不想要保存到实体路径下,便可以用该功能来实现。   效果图:      点击【Upload】按钮,上传文件到数据库;   点击【Preview】,预览文件;   具体实现:   前台: 1 2 3 4 : 5 ...
1680 0
无法解析类型 javax.servlet.http.HttpServletRequest。从必需的 .class 文件间接引用
java.lang.Error: 无法解析的编译问题: 无法解析类型 javax.servlet.http.HttpServletRequest。从必需的 .class 文件间接引用了它 无法解析类型 javax.servlet.http.HttpServletResponse。
1540 0
+关注
烟火_
从事java开发多年
113
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载