Plupload上傳實例《模仿微雲上傳實例》，帶源碼

Plupload上傳實例《模仿微雲上傳實例》，帶源碼，做者：魚塘總裁

若有疑問，加羣交流：646104701

1、實例截圖

一、上傳過程

二、上傳成功

三、上傳失敗

四、最小化

 

2、所需文件

index.html

plupload.css

Jquery-1.8.0.min.js

PublicContent.js

plupload.full.min.js

upload_file.js

 

3、源碼

一、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> 

二、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;
}

三、Jquery-1.8.0.min.js 自行從網上下載

四、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;
}

五、plupload.full.min.js 自行從網上下載

六、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('等待上傳');
        }
    }
    
    //一、判斷當前上傳狀態，若是等於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);
}

 

4、其餘資料

一、Plupload上傳插件中文文檔：http://www.cnblogs.com/phpyangbo/p/8441066.html

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