首先感谢,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进行提交

使用PLupload在同一页面中进行多个不同类型上传解决方案和一次多文件上传的注意事项的更多相关文章

  1. nodejs之获取客户端真实的ip地址+动态页面中引用静态路径下的文件及图片等内容

    1.nodejs获取客户端真实的IP地址: 在一般的管理网站中,尝尝会需要将用户的一些操作记录下来,并记住是哪个用户进行操作的,这时需要用户的ip地址,但是往往当这些应用部署在服务器上后,都使用了ng ...

  2. ASP.NET CORE RAZOR :将文件上传至 ASP.NET Core 中的 Razor 页面

    本部分演示使用 Razor 页面上传文件. 本教程中的 Razor 页面 Movie 示例应用使用简单的模型绑定上传文件,非常适合上传小型文件. 有关流式传输大文件的信息,请参阅通过流式传输上传大文件 ...

  3. 文件上传plupload组件使用

    这段时间一直在使用文件上传,简要的介绍一下文件上传的组件使用,先上一段代码. var uploader = new plupload.Uploader( { //用来指定上传方式,指定多个上传方式请使 ...

  4. PHP中,文件上传实例

    PHP中,文件上传一般是通过move_uploaded_file()来实现的.  bool move_uploaded_file ( string filename, string destinati ...

  5. spring mvc中的文件上传

    使用commons-fileupload上传文件所需要的架包有:commons-fileupload 和common-io两个架包支持,可以到Apache官网下砸. 在配置文件spring-mvc.x ...

  6. javaWeb中的文件上传下载

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  7. javaWeb中,文件上传和下载

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  8. 关于ueditor在Java中文件上传问题,404问题

    问题困扰了两天,部署要求导入到webcontent下,我导入到了整个项目目录下,自己粗心犯错,导致页面访问不到404. 解决了上面的问题,试着进行文件上传,却一直找不到图片: 调出浏览器控制台: 刚开 ...

  9. 【SpringMVC学习08】SpringMVC中实现文件上传

    之前有写过一篇struts2实现的文件上传,这一篇博文主要来总结下springmvc实现文件上传的步骤.首先来看一下单个文件的上传,然后再来总结下多个文件上传. 1. 环境准备 springmvc上传 ...

随机推荐

  1. 解决mongodb TypeError: Cannot read property 'XXX' of null 问题

    有时候我们的字段里的数据为空而去查询就会报错. 比如以下形式: “cartList”:[] “cartList”:[{}] “cartList”:{} “cartList”:null 在查询的时候加上 ...

  2. 03016_DBCP连接池

    1.连接池概述 (1)用池来管理Connection,这样可以重复使用Connection: (2)有了池,所以我们就不用自己来创建Connection,而是通过池来获取Connection对象: ( ...

  3. 9 hbase源码系列(九)StoreFile存储格式

    hbase源码系列(九)StoreFile存储格式    从这一章开始要讲Region Server这块的了,但是在讲Region Server这块之前得讲一下StoreFile,否则后面的不好讲下去 ...

  4. Java中发送http的get、post请求

    近期做项目中,须要把消息通过中间件的形式通过http请求的方式推送给第三方,因此用到了http协议,小编花费了一个多小时.对于http协议中的post和get请求,封装了一个工具类.以下与大家分享一下 ...

  5. [问题]HDOJ1032 The 3n + 1 problem

    http://acm.hdu.edu.cn/showproblem.php? pid=1032 这题能够用暴力求解.求出在[ni,nj]之间全部数字产生的最大值. 通过观察能够知道,当nk靠近nj的时 ...

  6. 关于App程序猿泡沫

    前言 做开发快七年了,对于程序猿,外行人总有着数不完的讽刺和误解,可是我都懒得去解释.代码搬运工人也好,民工也罢,随他们去说吧.可是网上近期流传的程序猿泡沫,尤其是APP程序猿泡沫的文章导致非常多我们 ...

  7. Android——bootchart

    bootchart:android原生自带的开机性能查看机制.通过收集android开机过程中的各种log数据,终于能够图表的形式展现各个进程在开机过程中的性能.(博客不能断-) 撰写不易,转载需注明 ...

  8. 保存数据同一时候查询保存数据记录的ID

    保存数据时同一时候取出该数据的记录ID insert into Table(a,b) values(1,2) select @@identity

  9. HDOJ 4009 Transfer water 最小树形图

    Transfer water Time Limit: 5000/3000 MS (Java/Others)    Memory Limit: 65768/65768 K (Java/Others) T ...

  10. dropify,不错的图片上传预览插件

    引言 传统的图片上传,很丑.点击选择之后,还无法预览. 有一种方案是传到服务器,然后返回地址,然后显示,比较麻烦. 用这个dropify,就可以解决之歌问题. 看效果 用法 1.引入文件,需要jque ...