前端上傳控件plupload總結

plupload是一個單圖和多圖上傳控件:

屬性和方法介紹，參考如下博客：

http://www.javashuo.com/article/p-yuxgpkex-e.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; 
　　　　　　　} 
　　　　　} 
　　}

前端代碼：