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

1.前提

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

2.一键上传的原理

3.一键上传的实现方法

jQuery ocupload实现

下载地址:(该地址属于国外网站,需要FQ才可访问)

http://code.google.com/p/ocupload/

导入 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>

<!-- 导入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>

为导入的按钮添加一键上传的效果

$("#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";}
});

$("#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";

});

来自为知笔记(Wiz)

附件列表

转载于:https://www.cnblogs.com/zhaoxuan734/p/8745834.html

ocupload完成文件上传(一键上传)相关推荐

使用jQuery OCUpload实现excel文件一键上传功能
使用jQuery OCUpload实现excel文件一键上传功能 js代码 //为导入按钮,添加一键上传效果 $("#button-import").upload({action: ...
POI批量导入及一键上传ocupload和pinyin4j组件的使用案例
主要讲解四点: 快递员批量作废功能(重点,本质上是快递员的批量修改操作) 一键上传.POI解析Excel.pinyin4j(会用) 代码重构:优化模型驱动和优化分页代码(理解) 定区添加.带条件分页查 ...
使用ocupload和POI一键上传Excel并解析导入数据库
使用的工具如下: JQuery ocupload jquery.ocupload-1.1.2.js Apache POI poi-3.9.jar 如果是Maven项目添加依赖如下: <depe ...
html上传文件_.NET基于WebUploader大文件分片上传、断网续传、秒传
(给DotNet加星标,提升.Net技能) 转自:学习中的苦与乐 cnblogs.com/xiongze520/p/10412693.html 现在的项目开发基本上都用到了上传文件功能,或图片,或文档 ...
云服务器上传文件软件,云服务器上传文件软件
云服务器上传文件软件内容精选换一换弹性云服务器支持通过内网访问OBS,OBS可供用户存储任意类型的数据.将图片.视频等数据存储至OBS后,在ECS上可以访问OBS,下载桶中的图片或视频等数据.通 ...
文件上传漏洞 (上传知识点、题型总结大全-upload靶场全解)
文件上传漏洞什么是文件上传漏洞什么是webshell 一句话木马大全产生文件上传漏洞的原因文件上传漏洞的攻击与防御方式 1.前端限制 2.检查扩展名 1.黑名单策略, 2.白名单策略 3.检查 ...
怎样一键上传照片制作电子杂志？
在数字化时代,电子杂志成为了一种越来越受欢迎的出版方式.相比传统的纸质杂志,电子杂志具有更加便捷.环保和互动性强的特点.但是,对于许多新手来说,制作电子杂志可能仍然是一件比较困难的事情.本文将介绍一种 ...
php利用上传文件,如何利用PHP上传文件
上载文件表单请选择文件: $upload_file=$_FILES['upload_file']['tmp_name']; $upload_file_name=$_FILES['upload_fil ...
Web.Config文件配置之限制上传文件大小和时间
在邮件发送系统或者其他一些传送文件的网站中,用户传送文件的大小是有限制的,因为这样不但可以节省服务器的空间,还可以提高传送文件的速度.下面介绍如何在Web.Config文件中配置限制上传文件大小与时间 ...

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

附件列表

ocupload完成文件上传(一键上传)相关推荐

最新文章

热门文章