使用PLupload在同一页面中进行多个不同类型上传解决方案和一次多文件上传的注意事项...
首先感谢,http://www.cnblogs.com/2050/p/3913184.html 这篇文章作者。
在使用PLUpload之前个人先封装了一些常用配置,并且将success与error做为配置项绑定到原有事件中,另:由于工作原因,文件都是选中后就直接上传,也同步绑定了FilesAdded 方法,不需要的可以去除.
代码如下:
$.fn.plSingleUpload = function (options) {var settings = {flash_swf_url: '/scripts/Moxie.swf',silverlight_xap_url: '/scripts/Moxie.xap',multi_selection: false};jQuery.extend(settings, options);var uploaders = new plupload.Uploader(settings);if (settings.success) {uploaders.bind('FileUploaded', function (uploader, file, result) {var r = result.response;var args = [r, uploader, file, result];try {var data = $.parseJSON(r);if (data != null) {args[0] = data;}}catch (e) { }settings.success.apply(uploader, args);});}if (settings.error) {uploaders.bind('Error', function (uploader, error) {settings.error(error.message);});}else {uploaders.bind('Error', function (uploader, error) {alert("erro :" + error.message);});}uploaders.bind('FilesAdded', function (uploader, files) {uploader.start();});this.each(function () {uploaders.setOption('browse_button', this.id);uploaders.init();uploaders.refresh();});return uploaders; };
PLUpload只能有一个实例。如果有多个不同的类型的文件需要上传时需要执行二个步骤,这里拿项目举例。
步骤1:项目中有各种费用需要在一个页面中上传,这里在上传按钮中指定上传类型(data-action=1,2,3,4分别对应4种类型),再使用一个隐藏的按钮用来实例化PlUpload
<div class="col-md-8"><div class="btn-group form-inline"><button type="button" data-action="4" class="btn btn-default"><i class="glyphicon glyphicon-upload"></i> 承兑到款导入</button><button type="button" data-action="3" class="btn btn-default"><i class="glyphicon glyphicon-upload"></i> 垫付运费等导入</button><button type="button" data-action="2" class="btn btn-default"><i class="glyphicon glyphicon-upload"></i> 广告费导入</button><button type="button" data-action="1" class="btn btn-default"><i class="glyphicon glyphicon-upload"></i> 交行等非工行到款导入</button><button type="button" id="upload1" class="btn btn-default hidden"><i class="glyphicon glyphicon-upload"></i> 导入</button></div></div>
步骤2:点击不同的按钮时,传递参数,并且点击隐藏按钮,代码如下
<script language="javascript" type="text/javascript" charset="gb2312">$(document.body).ready(function () {var uploader = $("#upload1").plSingleUpload({url: '@Url.Action("ImportExls")',success: function (data) {if (data.Success) {}else {}$.alert(data.Message);}});$("button[data-action]").click(function () {var action = $(this).attr("data-action");uploader.setOption("multipart_params", { 'action': action });$("#upload1").click();});});
</script>
一次多文件上传的注意事项 : plupload上传文件是一个提交成功之后再提交另一个,直至所有文件上传完成,与我们想像中的一次提交不同。意味着在处理上传文件的时候,参数只能使用HttpPostedFileWrapper 而不能用HttpPostedFileWrapper[] ,默认情况下 upload1 将做为上传文件提交时的name进行提交
转载于:https://www.cnblogs.com/zyug/p/4892484.html
使用PLupload在同一页面中进行多个不同类型上传解决方案和一次多文件上传的注意事项...相关推荐
- 三层架构中ajax,基于mvc三层架构和ajax技术实现最简单的文件上传
前台页面提交文件 文件操作 上传文件 //上传文件 function upFile() { var file = document.getElementById("UpFile") ...
- 文件上传 服务器不响应headr,php 文件上传中服务器接收到$_FILES[xxx]['type'] 中的 type 原来是从 http header 里读取的,所以非常不可信...
$type = $_FILES[$filename]['type']; if ($type != "image/jpeg" && $type != "im ...
- jsf取js变量_JSF页面中的JS取得受管bean的数据(受管bean发送数据到页面)
[问题]Asp.net MVC 的cshtml页面中调用JS方法传递字符串变量参数. [解决]直接对变量加引号,如: 删除- http://blog.csdn.net/xxjoy_777/articl ...
- Spring MVC环境中的文件上传功能实现
在实际开发过程中,尤其是web项目开发,文件上传和下载的需求的功能非常场景,比如说用户头像.商品图片.邮件附件等等.其实文件上传下载的本质都是通过流的形式进行读写操作,而在开发中不同的框架都会对文件上 ...
- 分析文件上传过程中的HTTP头部
分析提交的HTTP请求的头部. POST /struts-upload/upload.do?queryParam=Successful HTTP/1.1 Accept: */* Referer: ht ...
- java web 文件上传工具类_JavaWeb中实现文件上传的方式有哪些?
上回我们说了下文件下载的方式有哪些,这次我们从不同的环境下简单来说说文件上传的方式有哪些. 文件上传的方式Servlet2.5 方式 Servlet3.0 方式 SpringMVC 方式 案例实操 S ...
- tomcat temp 大量 upload 文件_问题:JavaWeb中实现文件上传的方式有哪些?
问题:JavaWeb中实现文件上传的方式有哪些? 上回我们说了下文件下载的方式有哪些,这次我们从不同的环境下简单来说说文件上传的方式有哪些. 文件上传的方式 Servlet2.5 方式 Servlet ...
- java mime上传_JavaWeb中实现文件上传的方式有哪些?
上回我们说了下文件下载的方式有哪些,这次我们从不同的环境下简单来说说文件上传的方式有哪些. 文件上传的方式Servlet2.5 方式 Servlet3.0 方式 SpringMVC 方式 案例实操 S ...
- (转自dflying chen)使用Anthem.NET 1.5中的FileUpload控件实现Ajax方式的文件上传
Anthem.NET(我的介绍和比较,还有一篇)刚刚发布了其最新的1.5版本,其中很不错的一个新功能就是对文件上传功能的Ajax实现.本文将简要介绍一下该功能的使用方法. Anthem.NET的下载与 ...
最新文章
- python教程实例-Python中函数的用法实例教程
- 使用 user agent 判断微信内置浏览器版本信息
- android xml解析的三种方式
- Android 第十六课 使用LitePal查询数据
- 不会发布npm包?进来看看?
- 最长非下降子序列(O(nlogn))(offer收割)
- mybatis 详解------ 一级缓存、二级缓存(九)
- 多进程,守护进程,锁
- 二陈丸配什么吃不上火_燃气灶打不着火是什么原因 煤气灶打着火松手就灭解决方法【详解】...
- SPFA求最短路——Bellman-Ford算法的优化
- 【转载】强大的MongoDB数据库管理工具
- java中线程的生命周期_Java中的线程生命周期– Java中的线程状态
- 基于vue2.0与追书神器api的小说阅读webapp
- iTunes出现“iTunes不能读取iPhone的内容,请前往iPhone偏好设置的摘要选项卡,然后点击“恢复””的解决办法
- java libmp3lame_录制MP3格式的音频( lame 库的编译及使用)
- Python批量删除微博
- css 屏幕背景图片 img.html
- Brooklyn 2.1.0 (60+超炫苹果标志动画屏保)
- setuid函数解析
- 必应(bing)搜索跳转到百度解决方法
热门文章
- SQLi LABS Less-39
- linux后台运行命令和杀除命令
- win8:querySelector()方法
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(67)-MVC与ECharts
- 【数据结构】——构建二叉树,遍历二叉树
- freeMarker fmpp 解析PowerDesign PDM探索
- PHP MySQL 相关函数(上)
- Java数组基础笔记(引用、字符串数组)
- python十进制转二进制,八进制和十六进制
- 为什么python工程师掌握这些就够了_Python学到什么程度才可以去找工作?掌握这4点足够了!...