前端上传控件plupload总结

Posted 2021-12-28 huhu1020387597

plupload是一个单图和多图上传控件:

属性和方法介绍，参考以下博客：

https://www.cnblogs.com/2050/p/3913184.html

这里直接贴出JS代码，细到爆的注释，可以直接使用：

var uploader = new plupload.Uploader( //创建实例的构造方法
        runtimes: ‘html5,flash,silverlight,html4‘, //上传插件初始化选用那种方式的优先级顺序
        browse_button: ‘btn‘, // 上传按钮ID
        url: "<?php echo url2(‘case_detail‘,‘upload‘)?>",//"ajax.php", //远程上传地址
        //  flash_swf_url: ‘plupload/Moxie.swf‘, //flash文件地址
        //  silverlight_xap_url: ‘plupload/Moxie.xap‘, //silverlight文件地址
        filters: 
            max_file_size: ‘500kb‘, //最大上传文件大小（格式100b, 10kb, 10mb, 1gb）
            mime_types: [ //允许文件上传类型
                
                    title: "files",
                    extensions: "jpg,png,gif,ico"
                
            ]
        ,
        multi_selection: true, //true:ctrl多文件上传, false 单文件上传
        init: 
            FilesAdded: function (up, files)  //文件上传前事件
                var picTotal = 0;//计算选择的图片和已经存在图片总和
                var picLimit = 5;//图片限制数量
                //计算将要上传文件图片数量
                plupload.each(files, function (file)  //遍历文件
                    picTotal++;
                );
                //计算已经存在图片数量
                picTotal += $("#ul_pics").children("li").length;
                if (picTotal > picLimit) //控制上传文件数量
                    alert(`您上传的图片限制$picLimit张以内`);
                    return false;  //返回false，表示取消当前上传
                    //uploader.destroy(); //直接销毁upload对象，将导致无法再次点击
                    //window.location.reload(); //浏览器直接刷新，当前已经上传的丢失
                 else 
                    var li = ‘‘;
                    plupload.each(files, function (file)  //遍历文件，生成上传进度标签
                        li += "<li id=‘" + file[‘id‘] + "‘><div class=‘progress‘><span class=‘bar‘></span><span class=‘percent‘>0%</span></div></li>";
                    );
                    $("#ul_pics").append(li);
                    uploader.start();  //开始上传
                
            ,
            UploadProgress: function (up, file)  //上传中，显示进度条
                var percent = file.percent;
                $("#" + file.id).find(‘.bar‘).css(
                    "width": percent + "%"
                );
                $("#" + file.id).find(".percent").text(percent + "%");
            ,
            FileUploaded: function (up, file, info)  //文件上传成功的时候触发
                var data = eval("(" + info.response + ")");
                console.log(data); //打印返回数据
　　　　　　　　　　//回显图片，并在<a>标签中登记onclick删除方法，
                $("#" + file.id).html("<div class=‘img‘ style=‘position: relative;‘><a style=‘position: absolute;top:0;right: 0;‘ href=‘javascript:;‘ onclick=‘delUploadFile(this)‘><img src=‘<?php echo PUBLIC_STATIC; ?>/images/common/X.png‘ alt=‘‘></a><img src=‘" + data.data.path + "‘/></div><input type=‘hidden‘ name=‘pics[]‘ value=‘"+data.data.src+"‘>");
            ,
            Error: function (up, err)  //上传出错的时候触发
                alert(err.message);
            ,
            FilesRemoved:function(uploader,file)//当删除文件事件，在删除文件后触发
                $("#ul_pics").find("li#"+file[0].id).remove();
            
        
    );
    uploader.init();

    //删除方法
    function delUploadFile(el)
        var removeId = $(el).parent().parent().attr(‘id‘);//得到文件ID
        for(let i in uploader.files)
            if(uploader.files[i].id === removeId)
                uploader.removeFile(uploader.files[i]); //在files数组中删除上传文件，并触发FilesRemoved事件
　　　　　　　　　　break; 
　　　　　　　 
　　　　　 
　　

前端代码：