使用PlupLoad js外掛進行檔案上傳案例

專注前端30年發表於2017-11-09
JS

案例程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Plupload使用指南</title>
    <!-- 首先需要引入plupload的原始碼 -->
    <script src="js/plupload.full.min.js"></script>
</head>
<body>
<p>
    <button id="btn">選擇檔案</button>
</p>
<script>

    //例項化一個plupload上傳物件
    var uploader = new plupload.Uploader({
        browse_button: 'btn', //觸發檔案選擇對話方塊的按鈕，為那個元素id
        url: 'http://localhost:3000/map', //伺服器端的上傳頁面地址
        filters: {
            //設定允許上傳的型別
            max_file_size: '100mb', //設定允許上傳的最大檔案的大小
            mime_types: [
                //用來限定上傳檔案的型別,一個型別一個物件，放入當前陣列
                {title: 'Image files', extensions: 'jpg,png,tif,bmp'}
            ]
        }
    });

    //在例項物件上呼叫init()方法進行初始化
    uploader.init();

    //當檔案新增到上傳佇列後觸發監聽函式引數
    uploader.bind('FilesAdded', function (uploader, files) {
        //uploader為當前的plupload例項物件，files為一個陣列，裡面的元素為本次新增到上傳佇列裡的檔案物件
        console.log(uploader,files);
        //佇列新增檔案後，直接呼叫檔案上傳，也可以單獨拿出
        uploader.start();
    });

    //當佇列中的某一個檔案正要開始上傳前觸發監聽函式引數
    uploader.bind("BeforeUpload",function (uploader,file) {
        //uploader為當前的plupload例項物件，file為觸發此事件的檔案物件
        console.log("開始上傳",uploader,file);
    });

    //會在檔案上傳過程中不斷觸發，可以用此事件來顯示上傳進度監聽函式引數
    uploader.bind('UploadProgress', function (uploader, file) {
        //uploader為當前的plupload例項物件，file為觸發此事件的檔案物件
        console.log(file.id,file.name,file.percent);
    });

    //當佇列中的某一個檔案上傳完成後觸發監聽函式引數
    uploader.bind("FileUploaded",function (uploader,file,responseObject) {
        //uploader為當前的plupload例項物件，file為觸發此事件的檔案物件，responseObject為伺服器返回的資訊物件，它有以下3個屬性：
        //response：伺服器返回的文字
        //responseHeaders：伺服器返回的頭資訊
        //status：伺服器返回的http狀態碼，比如200
        console.log("上傳完成",uploader,file,responseObject);
    });

</script>
</body>
</html>

file物件的相關屬性

屬性/方法 描述
id 檔案id
name 檔名，例如”myfile.gif”
type 檔案型別，例如”image/jpeg”
size 檔案大小，單位為位元組，當啟用了客戶端壓縮功能後，該值可能會改變
origSize 檔案的原始大小，單位為位元組
loaded 檔案已上傳部分的大小，單位為位元組
percent 檔案已上傳部分所佔的百分比，如50就代表已上傳了50%
status 檔案的狀態，可能為以下幾個值之一：plupload.QUEUED, plupload.UPLOADING, plupload.FAILED, plupload.DONE
lastModifiedDate 檔案最後修改的時間
getNative() 獲取原生的檔案物件
getSource() 獲取mOxie.File 物件，想了解mOxie是什麼東西，可以看下https://github.com/moxiecode/moxie/wiki/API
destroy() 銷燬檔案物件

相關文章