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

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

　　一個(gè)主要的頁(yè)面,其中包裹了一個(gè)iframe頁(yè)面,在項(xiàng)目中,這個(gè)iframe頁(yè)面包裹在主頁(yè)面的div標(biāo)簽中,主要用于上傳文件附件。用的是plupload.full插件。

　　Plupload有以下功能和特點(diǎn)：

　　1、擁有多種上傳方式：HTML5、flash、silverlight以及傳統(tǒng)的。Plupload會(huì)自動(dòng)偵測(cè)當(dāng)前的環(huán)境，選擇最合適的上傳方式，并且會(huì)優(yōu)先使用HTML5的方式。所以你完全不用去操心當(dāng)前的瀏覽器支持哪些上傳方式，Plupload會(huì)自動(dòng)為你選擇最合適的方式。

　　2、支持以拖拽的方式來(lái)選取要上傳的文件

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

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

　　5、支持把大文件切割成小片進(jìn)行上傳，因?yàn)橛行g覽器對(duì)很大的文件比如幾G的一些文件無(wú)法上傳。

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

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

　　2、實(shí)例化一個(gè)plupload對(duì)象，傳入一個(gè)配置參數(shù)對(duì)象進(jìn)行各方面的配置。

　　3、調(diào)用plupload實(shí)例對(duì)象的init()方法進(jìn)行初始化

　　4、在plupload實(shí)例對(duì)象上注冊(cè)各種你需要的事件。plupload從選取文件到文件上傳完成這個(gè)過(guò)程中，會(huì)觸發(fā)很多事件。我們可以通過(guò)這些事件來(lái)跟plupload進(jìn)行交互。

　　5、實(shí)現(xiàn)你自己所注冊(cè)的那些事件的監(jiān)聽(tīng)函數(shù)，利用這些監(jiān)聽(tīng)函數(shù)來(lái)進(jìn)行更新UI、提示上傳進(jìn)度等工作。

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

　　<buttonid="start_upload">開(kāi)始上傳</button>

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

　　//實(shí)例化一個(gè)plupload上傳對(duì)象

　　varfileName="";

　　varuploader=newplupload.Uploader({//實(shí)例化一個(gè)plupload上傳對(duì)象

　　browse_button:'browse',

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

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