精华内容
下载资源
问答
  •  Plupload 多实例上传。 Plupload 个上传按钮。 Plupload 上传成功获取返回值. DEMO: charset="UTF-8">Plupload使用指南<!-- 首先需要引入plupload的源代码 -->src="js/plupload.full.min.js"><!-- ...
    •   Plupload  上传详细讲。
    •   Plupload  多实例上传。
    •   Plupload  多个上传按钮。
    •   Plupload  上传成功获取返回值.

      DEMO:
      1. <!DOCTYPE html>
      2. <html>
      3. <head>
      4. <metacharset="UTF-8">
      5. <title>Plupload使用指南</title>
      6. <!-- 首先需要引入plupload的源代码 -->
      7. <scriptsrc="js/plupload.full.min.js"></script>
      8. </head>
      9. <body>
      10. <!-- 这里我们只使用最基本的html结构:一个选择文件的按钮,一个开始上传文件的按钮(甚至该按钮也可以不要) -->
      11. <p>
      12. <buttonid="browse">选择文件</button>
      13. <buttonid="start_upload">开始上传</button>
      14. </p>
      15. <script>
      16. //实例化一个plupload上传对象
      17. var uploader =new plupload.Uploader({
      18. browse_button:'browse',//触发文件选择对话框的按钮,为那个元素id
      19. url:'images/upload.shtml',//服务器端的上传页面地址
      20. flash_swf_url:'js/Moxie.swf',//swf文件,当需要使用swf方式进行上传时需要配置该参数
      21. max_file_size:'2mb',//限制为2MB
        filters:[{title:"Image files",extensions:"jpg,gif,png"}]//图片限制
      22. silverlight_xap_url:'js/Moxie.xap'//silverlight文件,当需要使用silverlight方式进行上传时需要配置该参数
      23. });
      24. //在实例对象上调用init()方法进行初始化
      25. uploader.init();
      26. //图片选择完毕触发
      27. uploader.bind('FilesAdded',function(uploader,files){
      28. });
      29. //图片上传成功触发,ps:data是返回值(第三个参数是返回值)
      30. uploader.bind('FileUploaded',function(uploader,files,data){
      31. });
      32. //会在文件上传过程中不断触发,可以用此事件来显示上传进度监听(比如说上传进度)
      33. uploader.bind('UploadProgress',function(uploader,file){
      34. });
      35. //还有N多呢.....,具体参考链接==>http://www.sojson.com/jc_plupload.html 的各种事件说明。
      36. //最后给"开始上传"按钮注册事件
      37. document.getElementById('start_upload').onclick=function(){
      38. uploader.start();//调用实例对象的start()方法开始上传文件,当然你也可以在其他地方调用该方法
      39. }
      40. </script>
      41. </body>
      42. </html>

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

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

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

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

      好了,说到这里了,一般的使用没问题了,有问题参考请见http://www.sojson.com/jc_plupload.html 对Plupload的介绍。

      Plupload多实例上传

      我们经常有需求,一个页面有多个图片上传的地方。

      需求1:比如餐厅添加员工,需要上传身份证,头像,健康证等等,那就有3个地方。而我们要对3 个图片上传一一对应上传,这时候是写3遍是肯定可以解决的。

      需求2:前提和需求1一样,但是上传的触发方式有多种,比如点击图片位置可以上传,点击图片的“上传按钮”也可以触发,如下图。


      点击身份证图片可以上传,点击“点击上传身份证正面”按钮也可以上传。

      Plupload多实例上传方案一。

      有的同学知道  Plupload  有一个设置,可以设置为数组。下面代码的browse_button 字段可以为数组,即为多个id 

      
          
      1. var uploader = new plupload.Uploader({
      2. //触发上传选择图片事件
      3. browse_button : ["cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img"],
      4. url : _upload ,//服务器端的上传页面地址
      5. max_file_size: '2mb',//限制为2MB
      6. filters: [{title: "Image files",extensions: "jpg,gif,png"}]//图片限制
      7. });

      这里有一个缺陷就是,如果对对应的上传图片按钮处理不同的回调事件,可能就有点力不从心,我也console.log(uploader) 对象仔细看,没有触发上传的id 元素存储,要是有就解决了。

      Plupload多实例上传方案二。

      我目前就是选用的这种方案,原因是我要对不同的事件做不同的处理,比如上面上传身份证的案例,我需要上传正面和反面,上传成功够把上传的图片赋值到对应的位置。看下代码:

        Javascript  代码:

      1. //触发的id
      2. var ids=newArray("cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img");
      3. $.each(ids,function(i,n){
      4. varself=this.toString();
      5. //实例化一个plupload上传对象
      6. var uploader =new plupload.Uploader({
      7. browse_button:self,//触发文件选择对话框的按钮,为那个元素id
      8. url: _upload,//服务器端的上传页面地址
      9. max_file_size:'2mb',//限制为2MB
      10. filters:[{title:"Image files",extensions:"jpg,gif,png"}]//图片限制
      11. });
      12. //在实例对象上调用init()方法进行初始化
      13. uploader.init();
      14. //绑定各种事件,并在事件监听函数中做你想做的事
      15. uploader.bind('FilesAdded',function(uploader,files){
      16. uploader.start();
      17. });
      18. uploader.bind('FileUploaded',function(uploader,files,data){
      19. var imgUrl ="http://cdn.www.sojson.com/";
      20. //这里得到图片的id
      21. var id =self.search("-img")==-1?self+"-img":self;
      22. console.log("现在在上传的身份证是:",self.search('cardzmbtn')==0?'正':'反',"面");
      23. //成功判断
      24. if(data.status==200){
      25. data= $.parseJSON(data.response);
      26. var imagePath = imgUrl+ data.file
      27. //图片赋值
      28. document.getElementById(id).src= imagePath;
      29. //正面
      30. if(self.search('cardzmbtn')===0){
      31. $("#cardzmbtn-input").val(imagePath).attr('src-data',data.file);
      32. }else{//反面
      33. $("#cardbmbtn-input").val(imagePath).attr('src-data',data.file);
      34. }
      35. }
      36. });
      37. });
        Html  代码:
      1. <!--身份证上传-->
      2. <divclass="regCon mt15"id="step1"style="display: block">
      3. <divclass="acctitle">身份证验证</div><br>
      4. 请上传有效期内的中华人民共和国二代身份证,<br>
      5. 请上传小于2M且可以清晰的看到身份证上面的汉字及数字的图片。
      6. <divclass="sfzdiv mt15 clearfix">
      7. <divclass="sfzbox fl">
      8. <!--<span class="sfz-m-t">正面</span>-->
      9. <divclass="sfz-img">
      10. <!--身份证上传-->
      11. <!--身份证通过时-->
      12. <imgsrc="pc_images/pcaccount/1.jpg"alt=""id="cardzmbtn-img"style="display: block;">
      13. <divclass="cardzmbtn"id="cardzmbtn">点击上传身份证正面</div>
      14. <divclass="sfz-zk"style="display: none">
      15. <pclass="f_12">身份证正面已上传</p>
      16. <pclass="f_10"><iclass="sfz-right"></i>审核已通过</p>
      17. <pclass="txt-c"><spanclass="a_upagin">重新上传</span></p>
      18. </div>
      19. </div>
      20. </div>
      21. <divclass="sfzbox sfz-fm fr">
      22. <!--<span class="sfz-m-t">背面</span>-->
      23. <divclass="sfz-img">
      24. <!--身份证未通过时-->
      25. <imgsrc="pc_images/pcaccount/2.jpg"alt=""id="cardbmbtn-img"style="display: block;">
      26. <divclass="cardbmbtn"id="cardbmbtn">点击上传身份证背面</div>
      27. <divclass="sfz-zk"style="display: none">
      28. <pclass="f_12">身份证背面已上传</p>
      29. <pclass="f_10"><iclass="sfz-woring"></i>审核未通过</p>
      30. <pclass="txt-c"><spanclass="a_upagin">重新上传</span></p>
      31. </div>
      32. </div>
      33. </div>
      34. <!-- 正面省份证 value:全地址,src-data:不带域名的地址-->
      35. <inputtype="hidden"id="cardzmbtn-input">
      36. <!-- 反面省份证 value:全地址,src-data:不带域名的地址 -->
      37. <inputtype="hidden"id="cardbmbtn-input">
      38. </div>
      39. <!--下边框-->
      40. <divclass="botton-border mt50">
      41. <ahref="javascript:void (0);"id="nextStep02"class="a_blue mt15">下一步</a>
      42. </div>
      43. <divclass="layer"></div>
      44. </div>
      上传的时候选择的是正面身份证上传,结果会把上传的图片显示到正面的位置,并且把地址赋值到<input type="hidden" id="cardzmbtn-input">  的value 中。反面则一样显示在反面的位置,image路径赋值到<input type="hidden" id="cardbmbtn-input">  中。有没有上传正反面身份证业务判断就用它来判断即可。

      原文地址:http://www.sojson.com/blog/214.html
    展开全文
  • Plupload上传实例《模仿微云上传实例》,带源码,作者:鱼塘总裁 如有疑问,加群交流:646104701 一、实例截图 1、上传过程 2、上传成功 3、上传失败 4、最小化 二、所需文件 index.html ...

    Plupload上传实例《模仿微云上传实例》,带源码,作者:鱼塘总裁

    如有疑问,加群交流:646104701

    一、实例截图

    1、上传过程

    2、上传成功

    3、上传失败

    4、最小化

     

    二、所需文件

    index.html

    plupload.css

    Jquery-1.8.0.min.js

    PublicContent.js

    plupload.full.min.js

    upload_file.js

     

    三、源码

    1、index.html

    <!--文件上传:plupload-->
    <link rel="stylesheet" type="text/css" href="plupload.css" />
    
    <script type="text/javascript" src="Jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="PublicContent.js"></script>
    <script type="text/javascript" src="plupload.full.min.js"></script>
    <script type="text/javascript">
    //当前路径
    var file_url    =    '{$file_url}';
    </script>
    
    
    <!--上传按钮-->
    <div id="container">
        <a href="javascript:;" id="pickfiles">上传文件</a>
    </div>
    
    <!--plupload上传器 start-->
    <div class="plup" display="block" state="dengdaishangchuan">
    
        <!--标题-->
        <div class="plup_title">
            <div class="plup_title_name"><i></i><span></span></div>
            <div class="plup_title_close"><i></i></div>
        </div>
        
        <!--表头-->
        <div class="plup_biaotou">
            <div class="plup_biaotou_li plup_biaotou_li_0">文件名</div>
            <div class="plup_biaotou_li plup_biaotou_li_1">大小</div>
            <div class="plup_biaotou_li plup_biaotou_li_2">状态</div>
            <div class="plup_biaotou_li plup_biaotou_li_3">操作</div>
        </div>
    
        <!--内容-->
        <div class="plup_list">
        
        </div>
        
        <!--表尾-->
        <div class="plup_biaowei">
            <div class="plup_biaowei_wancheng">完成</div>
            <div class="plup_biaowei_quanbuquxiao">全部取消</div>
        </div>
    
    </div>
    <!--plupload上传器 end-->
    
    
    <!--plupload操作文件-->
    <script charset="utf-8" src="upload_file.js"></script> 

    2、plupload.css

    /*盒子*/
    .plup{
        display:none;
        position: fixed;
        z-index: 999;
        bottom:0px;
        right: calc(50% - 361px);
        width: 720px;
        height: 322px;
        background:#FFF;
        border: 1px solid #9198a6;
        box-shadow: 0 0 10px #ccc;
    }
    
    /*盒子展开状态*/
    .plup[display="block"]{
        
    }
    
    /*盒子关闭状态*/
    .plup[display="none"] .plup_biaotou,.plup[display="none"] .plup_list,.plup[display="none"] .plup_biaowei{
        display:none;
    }
    .plup[display="none"] .plup_title{
        border-bottom: none;
    }
    .plup[display="none"] .plup_title .plup_title_close i{
        background-image: url(../Image/icon/upload_zhankai.png);
    }
    .plup[display="none"]{
        height:41px;
    }
    
    
    /*盒子等待上传*/
    .plup[state="dengdaishangchuan"]{
        
    }
    /*盒子正在上传*/
    .plup[state="zhengzaishangchuan"] .plup_biaowei_quanbuquxiao{
        display:block;
    }
    /*盒子上传成功*/
    .plup[state="shangchuanchenggong"] .plup_title_name i{
        margin-right:5px;
        width:18px;
        background-image: url(../Image/icon/upload_chenggong.png);
        background-repeat: no-repeat;
        background-position: center center;
    }
    .plup[state="shangchuanchenggong"] .plup_biaowei_wancheng{
        display:block;
    }
    /*盒子上传失败*/
    .plup[state="shangchuanshibai"] .plup_title_name i{
        margin-right:5px;
        width:18px;
        background-image: url(../Image/icon/upload_shibai.png);
        background-repeat: no-repeat;
        background-position: center center;
    }
    .plup[state="shangchuanshibai"] .plup_biaowei_wancheng{
        display:block;
    }
    
    
    
    /*标题*/
    .plup_title{
        height:40px;
        background:#f5f6f9;
        border-bottom: 1px solid #d8dce5;
    }
    .plup_title_name{
        float:left;
        width:668px;
        height:40px;
        padding-left:10px;
    }
    .plup_title_name i{
        display:inline-block;
        float:left;
        height:40px;
    }
    .plup_title_name span{
        display:inline-block;
        float:left;
        line-height:40px;
        font-size:14px;
        color:#888;
    }
    .plup_title_close{
        float:right;
        width:39px;
        height:40px;
        border-left: 1px solid #c7ced8;
    }
    .plup_title_close i{
        display:block;
        height:40px;
        border-left: 1px solid #fff;
        background-image: url(../Image/icon/upload_guanbi.png);
        background-repeat: no-repeat;
        background-position: center center;
        cursor:pointer;
    }
    
    
    
    /*表头*/
    .plup_biaotou{
        height:31px;
        background-image: url(../Image/icon/upload_biaotou_bj.png);
        background-repeat: repeat-x;
        background-position: center center;
        border-top: 1px solid #fff;
        border-bottom: 1px solid #e6e6e6;
    }
    .plup_biaotou_li{
        float:left;
        color:#020202;
        padding-left:10px;
        height:31px;
        line-height:31px;
    }
    .plup_biaotou_li_0{
        width:350px;
    }
    .plup_biaotou_li_1{
        width:110px;
    }
    .plup_biaotou_li_2{
        width:120px;
    }
    .plup_biaotou_li_3{
        width:100px;
    }
    
    
    /*内容*/
    .plup_list{
        height:206px;
        overflow: auto;
        overflow-x:hidden;
    }
    .plup_list_li{
        height:40px;
        border-bottom: 1px solid #ddebd8;
    }
    /*等待上传,无背景*/
    .plup_list_li[state="dengdaishangchuan"]{
        
    }
    /*正在上传,有背景*/
    .plup_list_li[state="zhengzaishangchuan"] .plup_list_li_background_body{
        background-color:none;
        background-image: url(../Image/icon/upload_shangchuanzhong_bj.png);
        background-repeat: repeat-x;
        background-position: center center;
    }
    /*上传成功,无背景*/
    .plup_list_li[state="shangchuanchenggong"] .plup_list_li_body_zhuangtai i{
        margin-right:5px;
        width:18px;
        background-image: url(../Image/icon/upload_chenggong.png);
        background-repeat: no-repeat;
        background-position: center center;
    }
    .plup_list_li[state="shangchuanchenggong"] .plup_list_li_body_caozuo i{
        display:none;
    }
    /*上传失败,有背景*/
    .plup_list_li[state="shangchuanshibai"] .plup_list_li_background_body{
        width:100% !important;
        background-color:#fffae1;
    }
    .plup_list_li[state="shangchuanshibai"] .plup_list_li_body_zhuangtai i{
        margin-right:5px;
        width:18px;
        background-image: url(../Image/icon/upload_shibai.png);
        background-repeat: no-repeat;
        background-position: center center;
    }
    .plup_list_li[state="shangchuanshibai"] .plup_list_li_body_caozuo i{
        display:none;
    }
    
    .plup_list_li_background{
        position: static;
        z-index: 1;
        width:720px;
        height:40px;
    }
    .plup_list_li_background_body{
        width:0px;
        height:40px;
    }
    .plup_list_li_body{
        position: static;
        z-index: 1;
        margin-top:-40px;
        width:720px;
        height:40px;
    }
    .plup_list_li_body_wenjianming{
        float:left;
        width:350px;
        padding-left:10px;
    }
    .plup_list_li_body_wenjianming i{
        display:inline-block;
        float:left;
        margin-right:5px;
        width:12px;
        height:40px;
        background-image: url(../Image/icon/upload_shang.png);
        background-repeat: no-repeat;
        background-position: left center;
    }
    .plup_list_li_body_wenjianming span{
        display:inline-block;
        float:left;
        width:320px;
        height:40px;
        line-height:40px;
        color:#020202;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .plup_list_li_body_daxiao{
        float:left;
        width:110px;
        height:40px;
        line-height:40px;
        color:#868686;
        padding-left:10px;
    }
    .plup_list_li_body_zhuangtai{
        float:left;
        width:120px;
        padding-left:10px;
    }
    .plup_list_li_body_zhuangtai i{
        display:inline-block;
        float:left;
        height:40px;
    }
    .plup_list_li_body_zhuangtai span{
        display:inline-block;
        float:left;
        height:40px;
        line-height:40px;
        color:#868686;
    }
    .plup_list_li_body_caozuo{
        float:left;
        width:100px;
        padding-left:10px;
    }
    .plup_list_li_body_caozuo i{
        display:inline-block;
        float:left;
        margin-top:14px;
        width:12px;
        height:12px;
        background-image: url(../Image/icon/upload_quxiao.png);
        background-repeat: no-repeat;
        background-position: center center;
        cursor:pointer;
    }
    
    
    /*表尾*/
    .plup_biaowei{
        height:41px;
        background-image: url(../Image/icon/upload_biaowei_bj.png);
        background-repeat: repeat-x;
        background-position: center center;
        border-top: 1px solid #b3b3b3;
    }
    .plup_biaowei_wancheng{
        display:none;
        float:right;
        margin-top:5px;
        margin-right:13px;
        width:46px;
        height:28px;
        line-height:28px;
        text-align:center;
        color:#fff;
        font-size:14px;
        background:#3091f2;
        border: 1px solid #288cef;
        cursor:pointer;
    }
    .plup_biaowei_quanbuquxiao{
        display:none;
        float:right;
        margin-top:5px;
        margin-right:13px;
        width:80px;
        height:28px;
        line-height:28px;
        text-align:center;
        color:#505254;
        font-size:14px;
        background:#fff;
        border: 1px solid #c7c9cf;
        cursor:pointer;
    }

    3、Jquery-1.8.0.min.js 自行从网上下载

    4、PublicContent.js

    /**
     * 取得json长度
    */
    function json_length(json){
        var this_length    =    0;
        for(var i in json){
            this_length++;
        }
        return this_length;
    }
    
    /**
    * 将秒数换成时分秒格式
    */
    function formatSeconds(value) {
        
        var theTime = parseInt(value);//
        var theTime1 = 0;//
        var theTime2 = 0;// 小时
        if(theTime > 60) {
            theTime1 = parseInt(theTime/60);
            theTime = parseInt(theTime%60);
                if(theTime1 > 60) {
                theTime2 = parseInt(theTime1/60);
                theTime1 = parseInt(theTime1%60);
                }
        }
        var result = ""+parseInt(theTime)+"秒";
        if(theTime1 > 0) {
            result = ""+parseInt(theTime1)+"分"+result;
        }
        if(theTime2 > 0) {
            result = ""+parseInt(theTime2)+"小时"+result;
        }
        return result;
    }

    5、plupload.full.min.js 自行从网上下载

    6、upload_file.js

    //文件上传
    $(function(){
    
        
        //打开plup,仅仅是任务窗口打开
        $(document).on('click','.plup[display="none"] .plup_title .plup_title_close i',function(){
            $('.plup').attr('display','block');
        });
        
        //关闭plup,仅仅是任务窗口关闭
        $(document).on('click','.plup[display="block"] .plup_title .plup_title_close i',function(){
            $('.plup').attr('display','none');
        });
        
        
        //完成
        $(document).on('click','.plup_biaowei_wancheng',function(){
            //隐藏盒子,整个都隐藏
            $('.plup').css('display','none');
        });
        
        
        //取消上传
        $(document).on('click','.plup_list_li_body_caozuo i',function(){
            
            var index    =    $(this).parent().parent().parent().index();
            
            //调用plupload函数移除
            uploader.splice(index,1);
        });
        
        
        //全部取消上传
        $(document).on('click','.plup_biaowei_quanbuquxiao',function(){
            
            //总任务数量
            var zongrenwu_num    =    json_length(uploader.files);
            //移除任务的序号
            var this_index    =    0;
            
            //遍历文件对象,取得当前正在上传的序号
            for(var i in uploader.files){
                //文件状态为2的,代表此文件正在上传
                if(uploader.files[i]['status']===2){
                    //移除任务的序号
                    this_index    =    i;
                }
            }
            
            //计算移除多少个
            var this_num    =    zongrenwu_num-this_index;
            
            //移除的数量大于0,那么就执行移除
            if(this_num>0){
                //调用plupload函数移除
                uploader.splice(this_index,this_num);
            }
        });
    
    });
    
    
    
    
    //实例化plup
    
    var uploader = new plupload.Uploader({
        runtimes : 'html5,html4,flash,silverlight',    //上传方式优先级定义
        browse_button : 'pickfiles',    // 选择文件触发器
        container: document.getElementById('container'),    //包含选择文件触发器的DIV
        url : '/Site/Space/upload.html',    //文件上传地址
        flash_swf_url : '/Public/Plupload/Moxie.swf',    //flash上传组件地址
        silverlight_xap_url : '/Public/Plupload/Moxie.xap',    //silverlight上传组件地址
        
        /*限制上传文件的类型*/
        filters : {
            max_file_size : '10000mb',    //最大只能上传10000mb的文件
            mime_types: [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip,rar"},
                {title : "pdf files", extensions : "pdf"},
                {title : "web files", extensions : "html,css,js"}
            ],    //可上传的文件格式
            prevent_duplicates : false //允许选取重复文件
        },
        
        /*post参数*/
        multipart_params: {
            file_url: file_url    //当前路径
        },
        
        
        init: {
    
            
            //添加新文件
            FilesAdded: function(up, files) {
            
                //遍历
                plupload.each(files, function(file) {
                    
                    
                    //添加任务界面
                    $('.plup_list').append('<div class="plup_list_li" state="dengdaishangchuan" id="'+file.id+'"><div class="plup_list_li_background"><div class="plup_list_li_background_body"></div></div><div class="plup_list_li_body"><div class="plup_list_li_body_wenjianming"><i></i><span>'+file.name+'</span></div><div class="plup_list_li_body_daxiao">'+plupload.formatSize(file.size)+'</div><div class="plup_list_li_body_zhuangtai"><i></i><span>等待上传</span></div><div class="plup_list_li_body_caozuo"><i></i></div></div></div>');
                    
                    //调用 [更新总任务状态] 函数
                    zongtirenwu_state();
                    
                    //启动上传
                    uploader.start();
                    
                    //alert(JSON.stringify(uploader.files));
                    //console.log(JSON.stringify(uploader.files));
                    
                });
                
                //显示盒子
                $('.plup').css('display','block');
            },
            
            //当队列某一文件开始上传后
            UploadFile: function(up, file) {
                
                //设置单个任务状态为:正在上传
                $('#'+file.id+'').attr('state','zhengzaishangchuan');
                $('#'+file.id+' .plup_list_li_body .plup_list_li_body_zhuangtai span').html('正在上传');
                
                
                //调用 [更新总任务状态] 函数
                zongtirenwu_state();
            },
            
            
            //上传进度
            UploadProgress: function(up, file) {
                
                //显示单个任务进度
                $('#'+file.id+' .plup_list_li_background .plup_list_li_background_body').css('width',file.percent+'%');
                
                
                //调用 [更新总任务状态] 函数
                zongtirenwu_state();
            },
            
            
            //当队列中的某一个文件上传完成后触发 
            FileUploaded: function(up,file,responseObject){
                /*responseObject为服务器返回的信息对象,它有以下3个属性:
    
                response:服务器返回的文本
    
                responseHeaders:服务器返回的头信息
    
                status:服务器返回的http状态码,比如200*/
                
                //此处还应该根据服务返回的状态码,判断一下,服务器是否保存成功,如果服务保存失败,此任务也应该设置为上传失败
                
                //设置单个任务状态为:上传成功
                $('#'+file.id+'').attr('state','shangchuanchenggong');
                $('#'+file.id+' .plup_list_li_body .plup_list_li_body_zhuangtai span').html('上传成功');
    
                
                //调用 [更新总任务状态] 函数
                zongtirenwu_state();
            },
            
            
            //当队列文件全部上传完成
            UploadComplete: function(uploader,files){
                
                
                //调用 [更新总任务状态] 函数
                zongtirenwu_state();
            },
            
            
            //当文件从上传队列移除后触发 
            FilesRemoved: function(up, files){
                
                //遍历被移除的文件列表
                plupload.each(files, function(file) {
                    
                    //删除任务视图
                    $('#'+file.id).remove();
                    
                    //调用 [更新总任务状态] 函数
                    zongtirenwu_state();
                });
            },
            
            //发生错误
            Error: function(up, err) {
                
                //把错误信息直接打印到控制台
                //console.log(JSON.stringify(err));
                
                layer.msg('错误代码:'+err.code+',文件:'+err.file.name+',错误信息:'+err.message, {icon: 7});
                
            }
            
        }
    });
    
    
    uploader.init();
    
    
    //更新总任务状态
    function zongtirenwu_state(){
        
        
        //判断当前上传状态,如果等于1,则代表当前没有在上传
        if(uploader.state===1){
            
            //如果已完成上传的文件的数量!=0
            //如果上传失败的文件数量==0
            //如果队列中剩下的需要上传的文件数量==0
            if(uploader.total.uploaded!==0 && uploader.total.failed===0 && uploader.total.queued===0){
                //设置总体任务状态为:上传成功
                $('.plup').attr('state','shangchuanchenggong');
                $('.plup_title_name span').html(uploader.total.uploaded+'个文件上传成功');
            }
            
            //如果上传失败的文件数量!=0
            //如果队列中剩下的需要上传的文件数量==0
            else if(uploader.total.failed!==0 && uploader.total.queued===0){
                //设置总体任务状态为:上传失败
                $('.plup').attr('state','shangchuanshibai');
                $('.plup_title_name span').html('上传成功:'+uploader.total.uploaded+'个,上传失败:'+uploader.total.failed+'个');
                
                
                //遍历文件对象,把由于客户端原因上传失败的文件设为上传失败
                for(var i in uploader.files){
                    
                    //文件状态为4的,是上传失败的
                    if(uploader.files[i]['status']===4){
                        //设置单个任务状态为:上传失败
                        $('#'+uploader.files[i]['id']+'').attr('state','shangchuanshibai');
                        $('#'+uploader.files[i]['id']+' .plup_list_li_body .plup_list_li_body_zhuangtai span').html('上传失败');
                    }
                }
            }
            
            //否则
            else{
                //设置总体任务状态为:等待上传
                $('.plup').attr('state','dengdaishangchuan');
                $('.plup_title_name span').html('等待上传');
            }
        }
        
        //1、判断当前上传状态,如果等于2,则代表正在上传中
        //2、判断队列中剩下未上传完成的任务数量,大于0,则代表正在上传中
        else if(uploader.state===2 && uploader.total.queued>0){
            
            //显示总体任务进度
            var zongrenwu_num    =    json_length(uploader.files);        //总任务数量
            var yiwancheng_num    =    uploader.total.uploaded;            //已完成任务数量
            var shangchuansulv    =    uploader.total.bytesPerSec/1024;    //速率
                shangchuansulv    =    shangchuansulv.toFixed(2);            //速率保留两位小数
                shengyushijian    =    (uploader.total.size-uploader.total.loaded)/uploader.total.bytesPerSec;    //剩余时间,公式:(任务总大小-已上传大小)/速率
                shengyushijian    =    parseInt(shengyushijian);            //剩余时间,取整
                shengyushijian    =    formatSeconds(shengyushijian);        //将秒转换为时分秒
            
            //设置总体任务状态为:正在上传
            $('.plup').attr('state','zhengzaishangchuan');
            $('.plup_title_name span').html('正在上传:'+yiwancheng_num+'/'+zongrenwu_num+' '+shangchuansulv+'K/s 剩余'+shengyushijian);
        }
        
        //否则
        else{
            //设置总体任务状态为:未知状态
            $('.plup').attr('state','weizhizhuangtai');
            $('.plup_title_name span').html('未知状态,上传状态码:'+uploader.state);
        }
        
        //console.log(uploader.state);
    }

     

    四、其他资料

    1、Plupload上传插件中文文档:http://www.cnblogs.com/phpyangbo/p/8441066.html

    本文出自:http://www.cnblogs.com/phpyangbo/p/8441220.html

    转载于:https://www.cnblogs.com/phpyangbo/p/8441220.html

    展开全文
  • 兼容IE8浏览器,Plupload js文件上传插件:支持文件上传上传进度。使用pluploadQueue(settings)实例化的uploader的刷新、重新上传、地址动态修改。

    Plupload兼容IE8的文件上传js插件

    最近在做ASP mvc3的一个项目,需要做一个文件上传的功能,开始使用的bootstrap-fileinput这个插件,因为前台框架使用了Bootstrap,效果也挺好的,支持文件上传预览。效果也很好:
    这里写图片描述
    但是只能支持IE10以上的浏览器
    为了兼容IE8浏览器,改用Plupload:支持多文件上传和上传进度;之前程序的后台也不用修改。插件下载地址:http://www.plupload.com/download/
    引入:

    jquery.plupload.queue.css
    jquery.min.js
    plupload.full.min.js
    jquery.plupload.queue.js 即可使用;

    代码

    <table >
            <tbody>
    <tr style="display:@(Model.storageID == 0 ? "" : "none")">
                    <td id="pluploader" colspan="3">
                        <p>你的浏览器不支持 Flash, Silverlight, Gears, BrowserPlus 或者 HTML5</p>
                    </td>
                </tr>
                <tr>
                    <td style="width: 100px; font-size: 14px; text-align: left;">备注</td>
                    <td colspan="2">
                        @Html.TextArea("memo", ViewBag.memo != null ? "" : (string)ViewBag.memo, new { style = "width: 90%", rows = 10 })
                    </td>
                </tr>
            </tbody>
        </table>
        <input class="btn btn-default" type="button" value="保存" id="saveControl" /> 
    
    <script type="text/javascript">
    
        $(document).ready(function () {
    
            var uploader = $("#pluploader").pluploadQueue({
                runtimes: 'html5,flash,silverlight,html4',
                url: '/Drawings/UploadFile/' + $('#filePath').val() + "?storageID=" + $('#storageID').val(),
                max_file_size: '1000mb',
                max_file_count: 20,
                chunk_size: '100mb',
                unique_names: false,
                multiple_queues: true,
                resize: { width: 320, height: 240, quality: 90 },
                rename: true,
                sortable: true,
                flash_swf_url: '@Url.Content("~/Content/plupload-2.1.8/js/Moxie.swf")',
                silverlight_xap_url: '@Url.Content("~/Content/plupload-2.1.8/js/Moxie.xap")',
                preinit: {
                    UploadComplete: function () {
                        history.back();
                    }
                }
            });
    
            plupload.addI18n({
                'Select files': '选择文件',
                'Add files to the upload queue and click the start button.': '将文件加入上传队列后按开始按钮开始上传。',
                'Filename': '文件名称',
                'Status': '状态',
                'Size': '大小',
                'Add Files': '添加文件',
                'Start Upload': '开始上传',
                'Stop Upload': '停止上传'
            });
    
            //隐藏上传按钮
            $('.plupload_start').attr('style', 'display:none');
    
            $('#saveControl').click(function () {
                $.ajax({
                    url: '@Url.Action("Save","FileStorage")', //提交给哪个执行 
                    data: $('#formData').serialize(),
                    type: 'POST',
                    success: function (data) {
                        document.getElementById("filePath").value = data.path;
                        //document.getElementById("storageID").value = data.storageID;
                        $('#storageID').val(data.storageID);
                        var urlStr = '/Drawings/UploadFile/' + $('#filePath').val() + "?storageID=" + $('#storageID').val();
                        $("#pluploader").pluploadQueue().setOption('url', urlStr);
                        $("#pluploader").pluploadQueue().refresh();
                        $("#pluploader").pluploadQueue().start();
                        //$('.plupload_start').click();
                    } //显示操作提示 
                });
            });
        });
    
        function pinTable(){
            //将某元素“钉”在容器内
            //小屏幕禁用Pin效果
            $(".note").pin({ containerSelector: "#pin_container", minWidth: 940 });
        }
    </script>

    开始使用的方案是现保存记录再上传附件,用户体验较差;修改方案,在新增记录的同时可以选择上传附件,然后点击保存,保存记录上传附件。
    这涉及到插件上传地址的变化,初始化生成的上传地址url需要更改,使用("#pluploader").pluploadQueue().setOption('url', urlStr);然后刷新一下(“#pluploader”).pluploadQueue().refresh();在js调用上传$(“#pluploader”).pluploadQueue().refresh();
    好了,效果不错:


    上传界面
    这里写图片描述
    结果:
    这里写图片描述
    colorbox的预览
    这里写图片描述

    展开全文
  • java+plupload多附件上传 servelet附件上传
  • Plupload上传插件详解,多实例上传

    千次阅读 2017-04-08 11:08:17
    我们来看一个比较全的 Plupload Demo charset="UTF-8"> Plupload使用指南 src="js/plupload.full.min.js"> id="browse">选择文件 id="start_upload">开始上传 //实例化一个plupl

    我们来看一个比较全的  Plupload  Demo

    
      
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Plupload使用指南</title>
    6. <!-- 首先需要引入plupload的源代码 -->
    7. <script src="js/plupload.full.min.js"></script>
    8. </head>
    9. <body>
    10. <!-- 这里我们只使用最基本的html结构:一个选择文件的按钮,一个开始上传文件的按钮(甚至该按钮也可以不要) -->
    11. <p>
    12. <button id="browse">选择文件</button>
    13. <button id="start_upload">开始上传</button>
    14. </p>
    15. <script>
    16. //实例化一个plupload上传对象
    17. var uploader = new plupload.Uploader({
    18. browse_button : 'browse', //触发文件选择对话框的按钮,为那个元素id
    19. url : 'images/upload.shtml', //服务器端的上传页面地址
    20. flash_swf_url : 'js/Moxie.swf', //swf文件,当需要使用swf方式进行上传时需要配置该参数
    21. max_file_size: '2mb',//限制为2MB
      filters: [{title: "Image files",extensions: "jpg,gif,png"}]//图片限制
    22. silverlight_xap_url : 'js/Moxie.xap' //silverlight文件,当需要使用silverlight方式进行上传时需要配置该参数
    23. });
    24. //在实例对象上调用init()方法进行初始化
    25. uploader.init();
    26. //图片选择完毕触发
    27. uploader.bind('FilesAdded',function(uploader,files){
    28. });
    29. //图片上传成功触发,ps:data是返回值(第三个参数是返回值)
    30. uploader.bind('FileUploaded',function(uploader,files,data){
    31. });
    32. //会在文件上传过程中不断触发,可以用此事件来显示上传进度监听(比如说上传进度)
    33. uploader.bind('UploadProgress',function(uploader,file){
    34. });
    35. //还有N多呢.....,具体参考链接==>http://www.sojson.com/jc_plupload.html 的各种事件说明。
    36. //最后给"开始上传"按钮注册事件
    37. document.getElementById('start_upload').onclick = function(){
    38. uploader.start(); //调用实例对象的start()方法开始上传文件,当然你也可以在其他地方调用该方法
    39. }
    40. </script>
    41. </body>
    42. </html>

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

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

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

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

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

    好了,说到这里了,一般的使用没问题了,有问题参考请见http://www.sojson.com/jc_plupload.html 对Plupload的介绍。

    Plupload多实例上传

    我们经常有需求,一个页面有多个图片上传的地方。

    需求1:比如餐厅添加员工,需要上传身份证,头像,健康证等等,那就有3个地方。而我们要对3 个图片上传一一对应上传,这时候是写3遍是肯定可以解决的。

    需求2:前提和需求1一样,但是上传的触发方式有多种,比如点击图片位置可以上传,点击图片的“上传按钮”也可以触发,如下图。

    点击身份证图片可以上传,点击“点击上传身份证正面”按钮也可以上传。

    Plupload多实例上传方案一。

    有的同学知道  Plupload  有一个设置,可以设置为数组。下面代码的browse_button 字段可以为数组,即为多个id 

    
      
    1. var uploader = new plupload.Uploader({
    2. //触发上传选择图片事件
    3. browse_button : ["cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img"],
    4. url : _upload ,//服务器端的上传页面地址
    5. max_file_size: '2mb',//限制为2MB
    6. filters: [{title: "Image files",extensions: "jpg,gif,png"}]//图片限制
    7. });

    这里有一个缺陷就是,如果对对应的上传图片按钮处理不同的回调事件,可能就有点力不从心,我也console.log(uploader) 对象仔细看,没有触发上传的id 元素存储,要是有就解决了。

    Plupload多实例上传方案二。

    我目前就是选用的这种方案,原因是我要对不同的事件做不同的处理,比如上面上传身份证的案例,我需要上传正面和反面,上传成功够把上传的图片赋值到对应的位置。看下代码:

      Javascript  代码:

    
      
    1. //触发的id
    2. var ids = new Array("cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img");
    3. $.each(ids,function(i,n){
    4. var self = this.toString();
    5. //实例化一个plupload上传对象
    6. var uploader = new plupload.Uploader({
    7. browse_button : self, //触发文件选择对话框的按钮,为那个元素id
    8. url : _upload ,//服务器端的上传页面地址
    9. max_file_size: '2mb',//限制为2MB
    10. filters: [{title: "Image files",extensions: "jpg,gif,png"}]//图片限制
    11. });
    12. //在实例对象上调用init()方法进行初始化
    13. uploader.init();
    14. //绑定各种事件,并在事件监听函数中做你想做的事
    15. uploader.bind('FilesAdded',function(uploader,files){
    16. uploader.start();
    17. });
    18. uploader.bind('FileUploaded',function(uploader,files,data){
    19. var imgUrl = "http://cdn.sojson.com/";
    20. //这里得到图片的id
    21. var id = self.search("-img") == -1?self +"-img":self;
    22. console.log("现在在上传的身份证是:",self.search('cardzmbtn')==0?'正':'反',"面");
    23. //成功判断
    24. if(data.status == 200 ){
    25. data = $.parseJSON(data.response);
    26. var imagePath = imgUrl + data.file
    27. //图片赋值
    28. document.getElementById(id).src = imagePath;
    29. //正面
    30. if(self.search('cardzmbtn')===0){
    31. $("#cardzmbtn-input").val(imagePath).attr('src-data',data.file);
    32. }else{//反面
    33. $("#cardbmbtn-input").val(imagePath).attr('src-data',data.file);
    34. }
    35. }
    36. });
    37. });

      Html  代码:

    
      
    1. <!--身份证上传-->
    2. <div class="regCon mt15" id="step1" style="display: block">
    3. <div class="acctitle">身份证验证</div><br>
    4. 请上传有效期内的中华人民共和国二代身份证,<br>
    5. 请上传小于2M且可以清晰的看到身份证上面的汉字及数字的图片。
    6. <div class="sfzdiv mt15 clearfix">
    7. <div class="sfzbox fl">
    8. <!--<span class="sfz-m-t">正面</span>-->
    9. <div class="sfz-img">
    10. <!--身份证上传-->
    11. <!--身份证通过时-->
    12. <img src="pc_images/pcaccount/1.jpg" alt="" id="cardzmbtn-img" style="display: block;">
    13. <div class="cardzmbtn" id="cardzmbtn">点击上传身份证正面</div>
    14. <div class="sfz-zk" style="display: none">
    15. <p class="f_12">身份证正面已上传</p>
    16. <p class="f_10"><i class="sfz-right"></i>审核已通过</p>
    17. <p class="txt-c"><span class="a_upagin">重新上传</span></p>
    18. </div>
    19. </div>
    20. </div>
    21. <div class="sfzbox sfz-fm fr" >
    22. <!--<span class="sfz-m-t">背面</span>-->
    23. <div class="sfz-img">
    24. <!--身份证未通过时-->
    25. <img src="pc_images/pcaccount/2.jpg" alt="" id="cardbmbtn-img" style="display: block;">
    26. <div class="cardbmbtn" id="cardbmbtn">点击上传身份证背面</div>
    27. <div class="sfz-zk" style="display: none">
    28. <p class="f_12">身份证背面已上传</p>
    29. <p class="f_10"><i class="sfz-woring"></i>审核未通过</p>
    30. <p class="txt-c"><span class="a_upagin">重新上传</span></p>
    31. </div>
    32. </div>
    33. </div>
    34. <!-- 正面省份证 value:全地址,src-data:不带域名的地址-->
    35. <input type="hidden" id="cardzmbtn-input">
    36. <!-- 反面省份证 value:全地址,src-data:不带域名的地址 -->
    37. <input type="hidden" id="cardbmbtn-input">
    38. </div>
    39. <!--下边框-->
    40. <div class="botton-border mt50">
    41. <a href="javascript:void (0);" id="nextStep02" class="a_blue mt15">下一步</a>
    42. </div>
    43. <div class="layer" ></div>
    44. </div>

    上传的时候选择的是正面身份证上传,结果会把上传的图片显示到正面的位置,并且把地址赋值到<input type="hidden" id="cardzmbtn-input">  的value 中。反面则一样显示在反面的位置,image路径赋值到<input type="hidden" id="cardbmbtn-input">  中。有没有上传正反面身份证业务判断就用它来判断即可。

    版权所属:SO JSON在线解析

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

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

    Plupload上传插件中文帮助文档

    http://www.sojson.com/jc_plupload.html

    展开全文
  • 我们来看一个比较全的 Plupload Demo &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Plupload使用指南&lt...
  • plupload 文件上传

    2018-09-21 16:18:11
    //实例化一个plupload上传对象 var uploader = new plupload.Uploader({ browse_button : self, //触发文件选择对话框的按钮,为那个元素id url : _upload ,//服务器端的上传页面地址 max_file_size: '2mb',//...
  • plupload多实例很简单,但是麻烦的是,返回的时候没有明显标记区分input的id,好蛋疼 var uploader = new plupload.Uploader({ //实例化一个plupload上传对象 // browse_button: 'browse', browse_button: ['...
  • //实例化一个上传组件对象 var uploader = new plupload.Uploader({ browse_button: 'browse' //触发文件选择对话框的按钮,为那个元素id , url: "http://localhost:8888/EmergencyIntegrated/fileUpload.srv " ...
  • var uploader = new plupload.Uploader({ //创建实例的构造方法  runtimes: 'html5,flash,silverlight,html4',  //上传插件初始化选用那种方式的优先级顺序  browse_button: 'btn',  // 上传按钮  ...
  • 本篇文章主要介绍了PHP + plupload.js实现上传并显示进度条加删除实例代码。具有一定的参考价值,有兴趣的可以了解一下。
  • plupload 实例

    2017-09-20 12:00:00
    script type="text/javascript" src="/js/Uploadify/plupload.min.js"></script> 官网下载地址:http://www.plupload.com/download/ 前台HTML代码 <div id="container"><a id="pickfil...
  • php仿新浪微博plupload上传视频文件实例,支持格式有mpg,m4v,mp4,flv,3gp,mov,avi,rmvb,mkv,wmv。首先选择要上传的文件,然后点击上传按钮开始上传,支持中途取消上传。 核心上传代码: var uploader_video = ...
  • plupload上传插件图片上传操作

    千次阅读 2017-08-11 08:56:18
    最近项目接触到plupload.full.min.js这个插件的使用,网上关于它具体使用很。  api可参照Plupload上传插件中文帮助文档.  带预览功能的上传操作可参照文件上传插件Plupload使用(带图片预览功能)  这两篇文章...
  • plupload文件上传事件用法实例

    千次阅读 2018-01-12 12:43:52
    转载:... $(function() {  $("#uploader").pluploadQueue({  runtimes : 'html5,gears,flash,silverlight,browserplus,html4',//设置运行环境,会按设置的
  • 实现上传并显示进度条加删除实例代码。具有一定的参考价值,有兴趣的可以了解一下。PHP + plupload.js JS插件实现上传并显示进度条加删除实例,废话不说,直接上代码HTML代码:上传*{ margin:0px; ...
  • 工作中经常会遇到单页面上传模块的功能,比如身份证正反面。使用plupload.js可以非常简单的实现这个功能。 github下载地址 https://github.com/moxiecode/plupload/tree/master/js 新建plupload.html页面 将...
  • 这个插件主要针对哪些用户? 1.空间小想做下载服务器的用户,既没有足够的带宽,又没有足够大的空间,我们这个怎么弄呢?将我们的网站做成中间层,然后用户上传到服务器其实就...关于这个插件,JS中不得不说Plupload
  • plupload上传图片

    2018-07-27 10:19:41
    thinkphp 实现plupload上传图片 thinkphp 实现plupload上传图片
  • PHP+Ajax+plupload无刷新上传头像代码 很简单的一款PHP+Ajax+plupload无刷新上传...本实例中只能上传"jpg", "png", "gif", "jpeg"等图片文件 引入jQuery库和plupload上传组件 1 <script ty...
  • 文件上传并读取plupload与java后台的整合实例
  • Plupload上传原理简单点说,就是将用户选中的文件(可个)分隔成一个个小块,依次向服务器上传,这是它能驾驭上传大文件的原因之一,而且在这个过程可以暂停上传,暂停后再继续上传(异于断点续传)。...
  • 这个实例是我们公司最近要实现图片上传而开发的。其实这是我第一次写博客,格式写的不好的话,希望大家理解。废话不说了,马上开整。使用的是plupload-2.1.2 控件。网上资源挺的,很好下载。plupload 官方地址...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 531
精华内容 212
关键字:

plupload多实例上传