前端上傳組件plupload的原理以及如何使用

本篇文章為大家展示了前端上傳組件plupload的原理以及如何使用，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

　　一個主要的頁面,其中包裹了一個iframe頁面,在項目中,這個iframe頁面包裹在主頁面的div標簽中,主要用于上傳文件附件。用的是plupload.full插件。

　　Plupload有以下功能和特點：

　　1、擁有多種上傳方式：HTML5、flash、silverlight以及傳統的。Plupload會自動偵測當前的環境，選擇最合適的上傳方式，并且會優先使用HTML5的方式。所以你完全不用去操心當前的瀏覽器支持哪些上傳方式，Plupload會自動為你選擇最合適的方式。

　　2、支持以拖拽的方式來選取要上傳的文件

　　3、支持在前端壓縮圖片，即在圖片文件還未上傳之前就對它進行壓縮

　　4、可以直接讀取原生的文件數據，這樣的好處就是例如可以在圖片文件還未上傳之前就能把它顯示在頁面上預覽

　　5、支持把大文件切割成小片進行上傳，因為有些瀏覽器對很大的文件比如幾G的一些文件無法上傳。

　　Plupload的使用方法可以分為以下幾步：

　　1、引入js文件，plupload的源文件可以去下載

　　2、實例化一個plupload對象，傳入一個配置參數對象進行各方面的配置。

　　3、調用plupload實例對象的init()方法進行初始化

　　4、在plupload實例對象上注冊各種你需要的事件。plupload從選取文件到文件上傳完成這個過程中，會觸發很多事件。我們可以通過這些事件來跟plupload進行交互。

　　5、實現你自己所注冊的那些事件的監聽函數，利用這些監聽函數來進行更新UI、提示上傳進度等工作。

　　<buttonid="browse">選擇文件</button>

　　<buttonid="start_upload">開始上傳</button>

　　<scriptsrc="plupload.full.min.js"></script>

　　//實例化一個plupload上傳對象

　　varfileName="";

　　varuploader=newplupload.Uploader({//實例化一個plupload上傳對象

　　browse_button:'browse',

　　file_data_name:'imgFile',//指定文件上傳時文件域的名稱

上述內容就是前端上傳組件plupload的原理以及如何使用，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。