Plupload 上传详细讲解,Plupload 多实例上传,Plupload多个上传按钮

JSON 2017-02-17 16:03:53 55603

今天帮朋友解决  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多呢.....,具体参考链接==>https://www.sojson.com/jc_plupload.html 的各种事件说明。 //最后给"开始上传"按钮注册事件 document.getElementById('start_upload').onclick = function(){ uploader.start(); //调用实例对象的start()方法开始上传文件,当然你也可以在其他地方调用该方法 } </script> </body> </html>

这个代码是从其他地方copy 过来,我做了些许改动。

这里要说清楚的是,要掌握  Plupload  上传,得掌握它的各种事件,事件详细参考请见https://www.sojson.com/jc_plupload.html 的各种事件说明。

着重讲到的是这个事件,成功后后台的返回值,以及  Plupload  的状态、head信息。在其他博客中很少有这个讲解。

//图片上传成功触发,ps:data是返回值(第三个参数是返回值)
uploader.bind('FileUploaded',function(uploader,files,data){
	/**
	uploader:当前实例的对象,
	files:被上传的文件
	data:返回值
	*/
});

参数没有额定的name ,只有位置。第三个参数是后台返回值。

好了,说到这里了,一般的使用没问题了,有问题参考请见https://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 = "//file.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">  中。有没有上传正反面身份证业务判断就用它来判断即可。


版权所属:SO JSON在线解析

原文地址:https://www.sojson.com/blog/214.html

转载时必须以链接形式注明原始出处及本声明。

本文主题:

如果本文对你有帮助,那么请你赞助我,让我更有激情的写下去,帮助更多的人。

关于作者
一个低调而闷骚的男人。
相关文章
如何把自己的Jar包上传到 maven 官方仓库中,Maven上传图文讲解
Maven的Mirror和Repository 的详细讲解
Linux 安装 Redis 详细步骤讲解
document.domain解决跨域问题,详细讲解
Bootstrap Affix 插件 高级用法详细讲解
SEO 之 SpringMVC redirect 301,301和302区别详细讲解
Golang 常见设计模式——装饰模式详细讲解
Freemarker Macro,Freemarker 宏参数传递详细讲解
TCP 和 UDP协议详细讲解,优缺点分析讲解
HttpClient 获取详细的头信息
最新文章
PHP变量剖析 4
SQL全外连接剖析 119
SQL自然连接剖析 147
springboot启动原理 245
SQL右连接【RIGHT JOIN】详解及图解 450
SQL左链接【LEFT JOIN】详解及图解 357
SQL非等值连接剖析 262
SQL等链接剖析 291
SQL内连接详解及图解 385
python之numpy常用的100种数值相关方法及代码示例 231
最热文章
最新MyEclipse8.5注册码,有效期到2020年 (已经更新) 679205
苹果电脑Mac怎么恢复出厂系统?苹果系统怎么重装系统? 674561
免费天气API,全国天气 JSON API接口,可以获取五天的天气预报 599008
免费天气API,天气JSON API,不限次数获取十五天的天气预报 565146
Jackson 时间格式化,时间注解 @JsonFormat 用法、时差问题说明 551699
我为什么要选择RabbitMQ ,RabbitMQ简介,各种MQ选型对比 509186
Elasticsearch教程(四) elasticsearch head 插件安装和使用 479635
Jackson 美化输出JSON,优雅的输出JSON数据,格式化输出JSON数据... ... 262798
Java 信任所有SSL证书,HTTPS请求抛错,忽略证书请求完美解决 244092
Elasticsearch教程(一),全程直播(小白级别) 225115
支付扫码

所有赞助/开支都讲公开明细,用于网站维护:赞助名单查看

查看我的收藏

正在加载... ...