今天帮朋友解决 Plupload 上传的问题，查了很多资料，资料还是挺全的，但是有点零零散散的，故整理好，合并发出来。
本教程包括：
- Plupload 上传详细讲。
- Plupload 多实例上传。
- Plupload 多个上传按钮。
- Plupload 上传成功获取返回值。
我们来看一个比较全的 Plupload Demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Plupload使用指南</title>
<!-- 首先需要引入plupload的源代码 -->
<script src="js/plupload.full.min.js"></script>
</head>
<body>
<!-- 这里我们只使用最基本的html结构：一个选择文件的按钮，一个开始上传文件的按钮(甚至该按钮也可以不要) -->
<p>
<button id="browse">选择文件</button>
<button id="start_upload">开始上传</button>
</p>
<script>
//实例化一个plupload上传对象
var uploader = new plupload.Uploader({
browse_button : 'browse', //触发文件选择对话框的按钮，为那个元素id
url : 'images/upload.shtml', //服务器端的上传页面地址
flash_swf_url : 'js/Moxie.swf', //swf文件，当需要使用swf方式进行上传时需要配置该参数
max_file_size: '2mb',//限制为2MB
filters: [{title: "Image files",extensions: "jpg,gif,png"}]//图片限制
silverlight_xap_url : 'js/Moxie.xap' //silverlight文件，当需要使用silverlight方式进行上传时需要配置该参数
});
//在实例对象上调用init()方法进行初始化
uploader.init();
//图片选择完毕触发
uploader.bind('FilesAdded',function(uploader,files){ });
//图片上传成功触发，ps:data是返回值（第三个参数是返回值）
uploader.bind('FileUploaded',function(uploader,files,data){
});
//会在文件上传过程中不断触发，可以用此事件来显示上传进度监听（比如说上传进度）
uploader.bind('UploadProgress',function(uploader,file){ });
//还有N多呢.....，具体参考链接==>http://www.sojson.com/jc_plupload.html 的各种事件说明。
//最后给"开始上传"按钮注册事件
document.getElementById('start_upload').onclick = function(){
uploader.start(); //调用实例对象的start()方法开始上传文件，当然你也可以在其他地方调用该方法
}
</script>
</body>
</html>
这个代码是从其他地方copy 过来，我做了些许改动。
这里要说清楚的是，要掌握 Plupload 上传，得掌握它的各种事件，事件详细参考请见http://www.sojson.com/jc_plupload.html 的各种事件说明。
着重讲到的是这个事件，成功后后台的返回值，以及 Plupload 的状态、head信息。在其他博客中很少有这个讲解。
//图片上传成功触发，ps:data是返回值（第三个参数是返回值）
uploader.bind('FileUploaded',function(uploader,files,data){
/**
uploader：当前实例的对象，
files：被上传的文件
data：返回值
*/
});
参数没有额定的name ，只有位置。第三个参数是后台返回值。
好了，说到这里了，一般的使用没问题了，有问题参考请见http://www.sojson.com/jc_plupload.html 对Plupload的介绍。
Plupload多实例上传
我们经常有需求，一个页面有多个图片上传的地方。
需求1：比如餐厅添加员工，需要上传身份证，头像，健康证等等，那就有3个地方。而我们要对3 个图片上传一一对应上传，这时候是写3遍是肯定可以解决的。
需求2：前提和需求1一样，但是上传的触发方式有多种，比如点击图片位置可以上传，点击图片的“上传按钮”也可以触发，如下图。
点击身份证图片可以上传，点击“点击上传身份证正面”按钮也可以上传。
Plupload多实例上传方案一。
有的同学知道 Plupload 有一个设置，可以设置为数组。下面代码的browse_button 字段可以为数组，即为多个id
var uploader = new plupload.Uploader({
//触发上传选择图片事件
browse_button : ["cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img"],
url : _upload ,//服务器端的上传页面地址
max_file_size: '2mb',//限制为2MB
filters: [{title: "Image files",extensions: "jpg,gif,png"}]//图片限制
});
这里有一个缺陷就是，如果对对应的上传图片按钮处理不同的回调事件，可能就有点力不从心，我也console.log(uploader) 对象仔细看，没有触发上传的id 元素存储，要是有就解决了。
Plupload多实例上传方案二。
我目前就是选用的这种方案，原因是我要对不同的事件做不同的处理，比如上面上传身份证的案例，我需要上传正面和反面，上传成功够把上传的图片赋值到对应的位置。看下代码：
Javascript 代码：
//触发的id
var ids = new Array("cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img");
$.each(ids,function(i,n){
var self = this.toString();
//实例化一个plupload上传对象
var uploader = new plupload.Uploader({
browse_button : self, //触发文件选择对话框的按钮，为那个元素id
url : _upload ,//服务器端的上传页面地址
max_file_size: '2mb',//限制为2MB
filters: [{title: "Image files",extensions: "jpg,gif,png"}]//图片限制
});
//在实例对象上调用init()方法进行初始化
uploader.init();
//绑定各种事件，并在事件监听函数中做你想做的事
uploader.bind('FilesAdded',function(uploader,files){
uploader.start();
});
uploader.bind('FileUploaded',function(uploader,files,data){
var imgUrl = "http://cdn.sojson.com/"; //这里得到图片的id
var id = self.search("-img") == -1?self +"-img":self;
console.log("现在在上传的身份证是：",self.search('cardzmbtn')==0?'正':'反',"面");
//成功判断
if(data.status == 200 ){
data = $.parseJSON(data.response);
var imagePath = imgUrl + data.file
//图片赋值
document.getElementById(id).src = imagePath;
//正面
if(self.search('cardzmbtn')===0){
$("#cardzmbtn-input").val(imagePath).attr('src-data',data.file);
}else{//反面
$("#cardbmbtn-input").val(imagePath).attr('src-data',data.file);
}
}
});
});
Html 代码：
<!--身份证上传-->
<div class="regCon mt15" id="step1" style="display: block">
<div class="acctitle">身份证验证</div><br>
请上传有效期内的*二代身份证，<br>
请上传小于2M且可以清晰的看到身份证上面的汉字及数字的图片。
<div class="sfzdiv mt15 clearfix">
<div class="sfzbox fl">
<!--<span class="sfz-m-t">正面</span>-->
<div class="sfz-img">
<!--身份证上传-->
<!--身份证通过时-->
<img src="pc_images/pcaccount/1.jpg" alt="" id="cardzmbtn-img" style="display: block;">
<div class="cardzmbtn" id="cardzmbtn">点击上传身份证正面</div>
<div class="sfz-zk" style="display: none">
<p class="f_12">身份证正面已上传</p>
<p class="f_10"><i class="sfz-right"></i>审核已通过</p>
<p class="txt-c"><span class="a_upagin">重新上传</span></p>
</div>
</div>
</div>
<div class="sfzbox sfz-fm fr" >
<!--<span class="sfz-m-t">背面</span>-->
<div class="sfz-img">
<!--身份证未通过时-->
<img src="pc_images/pcaccount/2.jpg" alt="" id="cardbmbtn-img" style="display: block;">
<div class="cardbmbtn" id="cardbmbtn">点击上传身份证背面</div>
<div class="sfz-zk" style="display: none">
<p class="f_12">身份证背面已上传</p>
<p class="f_10"><i class="sfz-woring"></i>审核未通过</p>
<p class="txt-c"><span class="a_upagin">重新上传</span></p>
</div>
</div>
</div>
<!-- 正面省份证 value：全地址，src-data:不带域名的地址-->
<input type="hidden" id="cardzmbtn-input">
<!-- 反面省份证 value：全地址，src-data:不带域名的地址 -->
<input type="hidden" id="cardbmbtn-input">
</div>
<!--下边框-->
<div class="botton-border mt50">
<a href="javascript:void (0);" id="nextStep02" class="a_blue mt15">下一步</a>
</div>
<div class="layer" ></div>
</div>
上传的时候选择的是正面身份证上传，结果会把上传的图片显示到正面的位置，并且把地址赋值到<input type="hidden" id="cardzmbtn-input"> 的value 中。反面则一样显示在反面的位置，image路径赋值到<input type="hidden" id="cardbmbtn-input"> 中。有没有上传正反面身份证业务判断就用它来判断即可。
Plupload 上传详细讲解，Plupload 多实例上传，Plupload多个上传按钮--推荐使用的更多相关文章
-
Mysql事务处理详细讲解及完整实例下载
一.Mysql事务概念 MySQL 事务主要用于处理操作量大,复杂度高的数据.由一步或几步数据库操作序列组成逻辑执行单元,这系列操作要么全部执行,要么全部放弃执行.在 MySQL 中只有使用了 Inn ...
-
mysql存储过程详细讲解及完整实例下载
一.存储过程概念 1.存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集.经编译后存储在数据库 中. 2.存储过程是数据库中的一个重要对象,用户通过指定存储过程的名字并给 ...
-
如何在云端部署SAP HANA实战, Azure 上的 SAP HANA（大型实例）概述和体系结构
什么是 Azure 上的 SAP HANA(大型实例)? Azure 上的 SAP HANA(大型实例)是一种针对 Azure 的独特解决方案. 除了提供 Azure 虚拟机以用于部署和运行 SAP ...
-
在net Core3.1上基于winform实现依赖注入实例
目录 在net Core3.1上基于winform实现依赖注入实例 1.背景 2.依赖注入 2.1依赖注入是什么? 2.1依赖注入的目的 2.2依赖注入带来的好处 2.2.1生命周期的控制 2.2.2 ...
-
Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程
Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...
-
Siki_Unity_2-1_API常用方法和类详细讲解(上)
Unity 2-1 API常用方法和类详细讲解(上) 任务1&2:课程前言.学习方法 && 开发环境.查API文档 API: Application Programming I ...
-
讲解开源项目：功能强大的 JS 文件上传库
本文作者:HelloGitHub-kalifun HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...
-
史上最详细JVM，Java内存区域讲解
本人免费整理了Java高级资料,一共30G,需要自己领取:传送门:https://mp.weixin.qq.com/s/JzddfH-7yNudmkjT0IRL8Q 运行时数据区域 JVM载执行Jav ...
-
风炫安全web安全学习第三十六节课-15种上传漏洞讲解(一)
风炫安全web安全学习第三十六节课 15种上传漏洞讲解(一) 文件上传漏洞 0x01 漏洞描述和原理 文件上传漏洞可以说是日常渗透测试用得最多的一个漏洞,因为用它获得服务器权限最快最直接.但是想真正把 ...
随机推荐
-
Mysql 迁移最完整可用的教程
此教程来源*,仅供我自己需要时查看,其他人不可以瞎看! ## Stop MySQL using the following command: `sudo /etc/init.d ...
-
人类大脑只开发了10%? I don&#39;t think so.
既然程序执行时有些部分是彼此互斥的(在程序的一次执行中,执行了这部分就不会去执行另一部分),那么所谓的 人类大脑只开发了10%? 是不是其实只是程序互斥的一种体现. 而往往"智商" ...
-
Linux云服务器安装tomcat
安装tomcat需要安装JDK 1.上传 把下载好的tomcat压缩包(apache-tomcat-7.0.tar.gz)和jdk(jdk-7u76-linux-x64.tar.gz)压缩包上传到/u ...
-
富文本ckediter
##<link rel='stylesheet' href='/css/index.css' /> <script type="text/javascript" ...
-
CA认证的原理和流程及https原理
1.什么是CA证书. 看过一些博客,写的比较形象具体. ◇ 普通的介绍信 想必大伙儿都听说过介绍信的例子吧?假设 A 公司的张三先生要到 B 公司去拜访,但是 B 公司的所有人都不认识他,他咋办捏?常 ...
-
caffe实现多任务学习
Github: https://github.com/Haiyang21/Caffe_MultiLabel_Classification Blogs 1. 采用多label的lmdb+Slice L ...
-
动手动脑（&;课后实验）：类和对象
1. 以下代码为何无法通过编译?哪儿出错了? 如果类提供了一个自定义的构造方法,将导致系统不再提供默认构造方法.而此时程序中已提供了一个有一个参数的构造函数,而定义对象时却没有参数,所以程序会报错. ...
-
A星寻路算法入门（Unity实现）
最近简单学习了一下A星寻路算法,来记录一下.还是个萌新,如果写的不好,请谅解.Unity版本:2018.3.2f1 A星寻路算法是什么 游戏开发中往往有这样的需求,让玩家控制的角色自动寻路到目标地点, ...
-
Mongodb网络好文章
http://blog.csdn.net/pi9nc/article/details/17722419 mongodb集群配置. http://blog.fens.me/mongodb-replica ...
-
ThreadLocal分析总结：
1.ThreadLocal 是什么 它是一个数据结构,像 HashMap,可保存 "key : value" 键值对:ThreadLocal 有一个内部类ThreadLocalMa ...