今天帮朋友解决  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多个上传按钮--推荐使用的更多相关文章

  1. Mysql事务处理详细讲解及完整实例下载

    一.Mysql事务概念 MySQL 事务主要用于处理操作量大,复杂度高的数据.由一步或几步数据库操作序列组成逻辑执行单元,这系列操作要么全部执行,要么全部放弃执行.在 MySQL 中只有使用了 Inn ...

  2. mysql存储过程详细讲解及完整实例下载

    一.存储过程概念 1.存储过程(Stored Procedure)是一组为了完成特定功能的SQL语句集.经编译后存储在数据库 中. 2.存储过程是数据库中的一个重要对象,用户通过指定存储过程的名字并给 ...

  3. 如何在云端部署SAP HANA实战, Azure 上的 SAP HANA(大型实例)概述和体系结构

    什么是 Azure 上的 SAP HANA(大型实例)? Azure 上的 SAP HANA(大型实例)是一种针对 Azure 的独特解决方案. 除了提供 Azure 虚拟机以用于部署和运行 SAP ...

  4. 在net Core3.1上基于winform实现依赖注入实例

    目录 在net Core3.1上基于winform实现依赖注入实例 1.背景 2.依赖注入 2.1依赖注入是什么? 2.1依赖注入的目的 2.2依赖注入带来的好处 2.2.1生命周期的控制 2.2.2 ...

  5. Asp.Net Core Web Api图片上传(一)集成MongoDB存储实例教程

    Asp.Net Core Web Api图片上传及MongoDB存储实例教程(一) 图片或者文件上传相信大家在开发中应该都会用到吧,有的时候还要对图片生成缩略图.那么如何在Asp.Net Core W ...

  6. Siki_Unity_2-1_API常用方法和类详细讲解(上)

    Unity 2-1 API常用方法和类详细讲解(上) 任务1&2:课程前言.学习方法 && 开发环境.查API文档 API: Application Programming I ...

  7. 讲解开源项目:功能强大的 JS 文件上传库

    本文作者:HelloGitHub-kalifun HelloGitHub 的<讲解开源项目>系列,项目地址:https://github.com/HelloGitHub-Team/Arti ...

  8. 史上最详细JVM,Java内存区域讲解

    本人免费整理了Java高级资料,一共30G,需要自己领取:传送门:https://mp.weixin.qq.com/s/JzddfH-7yNudmkjT0IRL8Q 运行时数据区域 JVM载执行Jav ...

  9. 风炫安全web安全学习第三十六节课-15种上传漏洞讲解(一)

    风炫安全web安全学习第三十六节课 15种上传漏洞讲解(一) 文件上传漏洞 0x01 漏洞描述和原理 文件上传漏洞可以说是日常渗透测试用得最多的一个漏洞,因为用它获得服务器权限最快最直接.但是想真正把 ...

随机推荐

  1. linux下tengine安装

    1.什么是tengine? 说到tengine,首先还是得说下nginx了,大家对于nginx并不陌生,对于基本的需求都能满足,如果是涉及高级性能,那么就必须使用商用版nginx plus了,一谈到商 ...

  2. ccflow之相对路径

    最近在使用集成CCFlow系统时,在项目中直接运行可以,但发布到项目时老是报找不到文件的错误,后跟踪发现 BP.WF.Dev2Interface.UI_Window_OneWork(this.FK_F ...

  3. 测试用例文件的存放和创建,对page objeck的理解

    如:(注意我下面这种要用eval函数取拼接的)

  4. ubuntu安装了mysql 但是编译报错 mysql.h: No such file or directory

    在Ubuntu体系中,已经安装了mysql,即应用sudo apt-get install mysql-server mysql-client 但是用C编译mysql数据库时,报错fatal erro ...

  5. springboot中filter的用法

    一.在spring的应用中我们存在两种过滤的用法,一种是拦截器.另外一种当然是过滤器.我们这里介绍过滤器在springboot的用法,在springmvc中的用法基本上一样,只是配置上面有点区别. 二 ...

  6. Running Your App(运行你的应用程序)

    如果你按照上一篇课程创建了android项目,它将包含helloworld的源文件,让你可以立即运行你的应用程序. 你如何运行你的应用程序app依赖于两件事: 你是否拥有一台真正的android设备 ...

  7. Python unittest excel数据驱动

    安装xlrd 下载地址:https://pypi.python.org/pypi/xlrd 安装ddt 下载地址:https://pypi.python.org/pypi/ddt/1.1.0 clas ...

  8. PL/SQL Developer Initialization erro

    PL/SQL Developer---------------------------Initialization errorSQL*Net not properly installed Oracle ...

  9. 图像特征与描述子(直方图, 聚类, 边缘检测, 兴趣点/关键点, Harris角点, 斑点(Blob), SIFI, 纹理特征)

    1.直方图 用于计算图片特征,表达, 使得数据具有总结性, 颜色直方图对数据空间进行量化,好比10个bin 2. 聚类 类内对象的相关性高 类间对象的相关性差 常用算法:kmeans, EM算法, m ...

  10. CImage 往Picture Control贴图 图像显示不正常

    在使用CImage 往vc控件 picture Control 上贴图的时候图像显示不太正常如图: 已知原始图片的宽高为640*640  而我上面picture Control  控件宽高小于原始图像 ...