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

ocupload完成文件上传(一键上传)

时间:2018-04-08 18:23:24      阅读:1024      评论:0      收藏:0      [点我收藏+]

标签:complete   mil   for   otto   bin   eclips   inf   put   附件   

1.前提
  • 必须同步提交 form 表单 
  • Form 表单编码方式 multipart/form-data 
  • 提交方式必须为 post 
  • 上传文件对应 input type=”file” 元素要提供 name 属性

2.一键上传的原理
技术分享图片

3.一键上传的实现方法
    jQuery ocupload实现

下载地址:(该地址属于国外网站,需要FQ才可访问)
技术分享图片


导入 jquery.ocupload-1.1.2.js 到项目中
技术分享图片

在页面引入 ocupload.js
<!-- 导入jquery核心类库 -->
<script type="text/javascript" src="/bos_management/js/jquery-1.8.3.js"></script>
<!-- 导入ocupload核心类库 -->
<script type="text/javascript" src="/bos_management/js/jquery.ocupload-1.1.2.js"></script>
4
4
 
1
<!-- 导入jquery核心类库 -->
2
<script type="text/javascript" src="/bos_management/js/jquery-1.8.3.js"></script>
3
<!-- 导入ocupload核心类库 -->
4
<script type="text/javascript" src="/bos_management/js/jquery.ocupload-1.1.2.js"></script>

为导入的按钮添加一键上传的效果 
$("#button-import").upload({
    //文件上传的路径
    action: ‘/bos_management/area_batchImport‘,
    onSelect: function() {
        //选择文件后,关闭自动提交
        this.autoSubmit = false;
        //获得文件名
        var filename = this.filename();
        //判断文件格式
        var regex = /^.*\.(xls|xlsx)$/;
        if(regex.test(filename)) {
            this.submit();
        } else {
            $.messager.alert("警告", "请选择后缀名为xls或xlsx的文件", "warning");
        }
    },
    //回调函数
    onComplete: function(response) {
        window.location.href = "/bos_management/pages/base/area.html";
    }
});
21
 
1
$("#button-import").upload({
2
    //文件上传的路径
3
    action: ‘/bos_management/area_batchImport‘,
4
    onSelect: function() {
5
        //选择文件后,关闭自动提交
6
        this.autoSubmit = false;
7
        //获得文件名
8
        var filename = this.filename();
9
        //判断文件格式
10
        var regex = /^.*\.(xls|xlsx)$/;
11
        if(regex.test(filename)) {
12
            this.submit();
13
        } else {
14
            $.messager.alert("警告", "请选择后缀名为xls或xlsx的文件", "warning");
15
        }
16
    },
17
    //回调函数
18
    onComplete: function(response) {
19
        window.location.href = "/bos_management/pages/base/area.html";
20
    }
21
});





附件列表

     

    ocupload完成文件上传(一键上传)

    标签:complete   mil   for   otto   bin   eclips   inf   put   附件   

    原文地址:https://www.cnblogs.com/zhaoxuan734/p/8745834.html

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