2. 程式人生 > >Plupload 上傳詳細講解，Plupload 多例項上傳，Plupload多個上傳按鈕

Plupload 上傳詳細講解，Plupload 多例項上傳，Plupload多個上傳按鈕

阿新 • • 發佈：2019-01-06
  •   Plupload  上傳成功獲取返回值.

    DEMO:
    1. <!DOCTYPE html>
    2. <html>
    3. <head>
    4. <metacharset="UTF-8">
    5. <title>Plupload使用指南</title>
    6. <!-- 首先需要引入plupload的原始碼 -->
    7. <scriptsrc="js/plupload.full.min.js"></script>
    8. </head>
    9. <body>
    10. <!-- 這裡我們只使用最基本的html結構：一個選擇檔案的按鈕，一個開始上傳檔案的按鈕(甚至該按鈕也可以不要) -->
    11. <p>
    12. <buttonid="browse">選擇檔案</button>
    13. <buttonid="start_upload">開始上傳</button>
    14. </p>
    15. <script>
    16. //例項化一個plupload上傳物件
    17. var uploader =new plupload.Uploader({
    18. browse_button:'browse',//觸發檔案選擇對話方塊的按鈕，為那個元素id
    19. url:'images/upload.shtml',//伺服器端的上傳頁面地址
    20. flash_swf_url:'js/Moxie.swf',//swf檔案，當需要使用swf方式進行上傳時需要配置該引數
    21. max_file_size:'2mb',//限制為2MB
      filters:[{title:"Image files",extensions:"jpg,gif,png"}]//圖片限制
    22. silverlight_xap_url:'js/Moxie.xap'//silverlight檔案，當需要使用silverlight方式進行上傳時需要配置該引數
    23. });
    24. //在例項物件上呼叫init()方法進行初始化
    25. uploader.init();
    26. //圖片選擇完畢觸發
    27. uploader.bind('FilesAdded',function(uploader,files){
    28. });
    29. //圖片上傳成功觸發，ps:data是返回值（第三個引數是返回值）
    30. uploader
      .bind('FileUploaded',function(uploader,files,data){
    31. });
    32. //會在檔案上傳過程中不斷觸發，可以用此事件來顯示上傳進度監聽（比如說上傳進度）
    33. uploader.bind('UploadProgress',function(uploader,file){
    34. });
    35. //還有N多呢.....，具體參考連結==>http://www.sojson.com/jc_plupload.html 的各種事件說明。
    36. //最後給"開始上傳"按鈕註冊事件
    37. document.getElementById('start_upload').onclick=function(){
    38. uploader.start();//呼叫例項物件的start()方法開始上傳檔案，當然你也可以在其他地方呼叫該方法
    39. }
    40. </script>
    41. </body>
    42. </html>

    著重講到的是這個事件，成功後後臺的返回值，以及  Plupload  的狀態、head資訊。在其他部落格中很少有這個講解。

    1. //圖片上傳成功觸發，ps:data是返回值（第三個引數是返回值）
    2. uploader.bind('FileUploaded',function(uploader,files,data){
    3. /**
    4. uploader：當前例項的物件，
    5. files：被上傳的檔案
    6. data：返回值
    7. */
    8. });

    引數沒有額定的name ，只有位置。第三個引數是後臺返回值。

    Plupload多例項上傳

    我們經常有需求，一個頁面有多個圖片上傳的地方。

    需求1：比如餐廳新增員工，需要上傳身份證，頭像，健康證等等，那就有3個地方。而我們要對3 個圖片上傳一一對應上傳，這時候是寫3遍是肯定可以解決的。

    需求2：前提和需求1一樣，但是上傳的觸發方式有多種，比如點選圖片位置可以上傳，點選圖片的“上傳按鈕”也可以觸發，如下圖。


    點選身份證圖片可以上傳，點選“點選上傳身份證正面”按鈕也可以上傳。

    Plupload多例項上傳方案一。

    有的同學知道  Plupload  有一個設定，可以設定為陣列。下面程式碼的browse_button 欄位可以為陣列，即為多個id 

    1. var uploader =new plupload.Uploader({
    2. //觸發上傳選擇圖片事件
    3. browse_button :["cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img"],
    4. url : _upload ,//伺服器端的上傳頁面地址
    5. max_file_size:'2mb',//限制為2MB
    6. filters:[{title:"Image files",extensions:"jpg,gif,png"}]//圖片限制
    7. });

    這裡有一個缺陷就是，如果對對應的上傳圖片按鈕處理不同的回撥事件，可能就有點力不從心，我也console.log(uploader) 物件仔細看，沒有觸發上傳的id 元素儲存，要是有就解決了。

    Plupload多例項上傳方案二。

    我目前就是選用的這種方案，原因是我要對不同的事件做不同的處理，比如上面上傳身份證的案例，我需要上傳正面和反面，上傳成功夠把上傳的圖片賦值到對應的位置。看下程式碼：

    1. //觸發的id
    2. var ids=newArray("cardzmbtn","cardbmbtn","cardzmbtn-img","cardbmbtn-img");
    3. $.each(ids,function(i,n){
    4. varself=this.toString();
    5. //例項化一個plupload上傳物件
    6. var uploader =new plupload.Uploader({
    7. browse_button:self,//觸發檔案選擇對話方塊的按鈕，為那個元素id
    8. url: _upload,//伺服器端的上傳頁面地址
    9. max_file_size:'2mb',//限制為2MB
    10. filters:[{title:"Image files",extensions:"jpg,gif,png"}]//圖片限制
    11. });
    12. //在例項物件上呼叫init()方法進行初始化
    13. uploader.init();
    14. //繫結各種事件，並在事件監聽函式中做你想做的事
    15. uploader.bind('FilesAdded',function(uploader,files){
    16. uploader.start();
    17. });
    18. uploader.bind('FileUploaded',function(uploader,files,data){
    19. var imgUrl ="http://cdn.www.sojson.com/";
    20. //這裡得到圖片的id
    21. var id =self.search("-img")==-1?self+"-img":self;
    22. console.log("現在在上傳的身份證是：",self.search('cardzmbtn')==0?'正':'反',"面");
    23. //成功判斷
    24. if(data.status==200){
    25. data= $.parseJSON(data.response);
    26. var imagePath = imgUrl+ data.file
    27. //圖片賦值
    28. document.getElementById(id).src= imagePath;
    29. //正面
    30. if(self.search('cardzmbtn')===0){
    31. $("#cardzmbtn-input").val(imagePath).attr('src-data',data.file);
    32. }else{//反面
    33. $("#cardbmbtn-input").val(imagePath).attr('src-data',data.file);
    34. }
    35. }
    36. });
    37. });
    Html  程式碼：
    1. <!--身份證上傳-->
    2. <divclass="regCon mt15"id="step1"style="display: block">
    3. <divclass="acctitle">身份證驗證</div><br>
    4. 請上傳有效期內的中華人民共和國二代身份證，<br>
    5. 請上傳小於2M且可以清晰的看到身份證上面的漢字及數字的圖片。
    6. <divclass="sfzdiv mt15 clearfix">
    7. <divclass="sfzbox fl">
    8. <!--<span class="sfz-m-t">正面</span>-->
    9. <divclass="sfz-img">
    10. <!--身份證上傳-->
    11. <!--身份證通過時-->
    12. <imgsrc="pc_images/pcaccount/1.jpg"alt=""id="cardzmbtn-img"style="display: block;">
    13. <divclass="cardzmbtn"id="cardzmbtn">點選上傳身份證正面</div>
    14. <divclass="sfz-zk"style="display: none">
    15. <pclass="f_12">身份證正面已上傳</p>
    16. <pclass="f_10"><iclass="sfz-right"></i>稽核已通過</p>
    17. <pclass="txt-c"><spanclass="a_upagin">重新上傳</span></p>
    18. </div>
    19. </div>
    20. </div>
    21. <divclass="sfzbox sfz-fm fr">
    22. <!--<span class="sfz-m-t">背面</span>-->
    23. <divclass="sfz-img">
    24. <!--身份證未通過時-->
    25. <imgsrc="pc_images/pcaccount/2.jpg"alt=""id="cardbmbtn-img"style="display: block;">
    26. <divclass="cardbmbtn"id="cardbmbtn">點選上傳身份證背面</div>
    27. <divclass="sfz-zk"style="display: none">
    28. <pclass="f_12">身份證背面已上傳</p>
    29. <pclass="f_10"><iclass="sfz-woring"></i>稽核未通過</p>
    30. <pclass="txt-c"><spanclass="a_upagin">重新上傳</span></p>
    31. </div>
    32. </div>
    33. </div>
    34. <!-- 正面省份證 value：全地址，src-data:不帶域名的地址-->
    35. <inputtype="hidden"id="cardzmbtn-input">
    36. <!-- 反面省份證 value：全地址，src-data:不帶域名的地址 -->
    37. <inputtype="hidden"id="cardbmbtn-input">
    38. </div>
    39. <!--下邊框-->
    40. <divclass="botton-border mt50">
    41. <ahref="javascript:void (0);"id=

      相關推薦

      Plupload 上傳詳細講解，Plupload 多實例上傳，Plupload多個上傳按鈕--推薦使用

      .html 目前 clas 路徑 arc 我們 參考 等等 選擇 今天幫朋友解決 Plupload 上傳的問題，查了很多資料，資料還是挺全的，但是有點零零散散的，故整理好，合並發出來。 本教程包括： Plupload 上傳詳細講。 Plupload 多實例

      Plupload 上傳詳細講解，Plupload 多例項上傳，Plupload多個上傳按鈕

        Plupload  上傳成功獲取返回值. DEMO:<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Plupload使用指南</title><!-- 首先需要引入pl

      史上最詳細、最完全的ipython使用教程，Python使用者必備！——ipython系列之二

      宣告：本文承接前面一篇文章，ipython系列之一；另外，本文所指的ipython不是ipython notebook，ipython notebook已經被jupyter notebook所取代，不再叫ipython notebook了。 前面講解了ipython裡面的一些核心

      史上最詳細、最完全的ipython使用教程，Python使用者必備！——ipython系列之一

      一、ipython簡介 關於什麼是ipython，本文就不加以介紹了，他是一個非常流行的python直譯器，相比於原生的python直譯器，有太多優點和長處，因此幾乎是python開發人員的必知必會。 1、ipython相比於原生的python有什麼優勢 (1) pyth

      sublime搭建C/C++編譯環境（超完美的配置並配上內容詳細講解！！）

      簡述 有兩臺電腦，之前的電腦上就有之前好基友分享的cpp配置。 但是另外一臺電腦上，一開始就沒有配置這個。 然後，在網上搜，發現搜到的那些配置。抱歉，我的意思是，在坐的各位都是垃圾 我的C/

      c#呼叫python的四種方法（嘗試了四種，只詳細講解本人成功的後兩種，其餘方法只列出，詳細用法請自行谷歌百度）

      一、使用c#，nuget管理包上下載的ironPython安裝包      嘗試後發現，對引用了numpy等第三方庫的python程式碼，會報找不到模組xxx的錯誤，上網查證後發現此問題基本難以解決 二、使用c++程式呼叫python檔案，然後將其做成動態連結庫

      史上最詳細的Hadoop環境搭建,從0開始，圖解全部過程

      Hadoop在大資料技術體系中的地位至關重要，Hadoop是大資料技術的基礎，對Hadoop基礎知識的掌握的紮實程度，決定在大資料技術道路上走多遠。 這是一篇入門文章，Hadoop的學習方法很多，網上也有很多學習路線圖。本文的思路是：以安裝部署Apache Hadoop2.x版本為主線，來介紹H

      對於給定的一個字串，統計其中數字字元出現的次數。輸入資料有多行，第一行是一個整數n，表示測試例項的個數，後面跟著n行，每行包括一個由字母和數字組成的字串。

      #include <iostream> using namespace std; int main() {int n,i,s;char x;        cin>>n;  

      MySql多例項配置及一主多從環境搭建

      主從複製原理 當 master 主伺服器上的資料發生改變時，則將其改變寫入二進位制日誌檔案中 salve 從伺服器會在一定時間間隔內對 master 主伺服器上的二進位制日誌進行探測，探測其是 否發生過改變 如果探測到 master 主伺服器的二進位制日誌發生了改變，則開始一個

      【原創】CentOS 7搭建多例項MySQL8（想要幾個搞幾個）

      起因    最近專案上開始重構，可能會用到主從加讀寫分離的情況，就想先在本地搭一個出來試試效果，結果百度一搜出來一大堆，然而自己去踩坑的沒幾個，絕大多數都是去抄的別人的內容，關鍵是實際應用中還會出錯，瀏覽器開了接近二十個標籤頁，試了好幾個都有問題，完全用不了，時間浪費了不說，還會讓你很憋屈

      Plupload上傳外掛詳解，多例項上傳

      我們來看一個比較全的  Plupload  Demo <!DOCTYPE html> <html> <head> <meta charset="U

      使用plupload.js實現單頁面多例項圖片上傳

      工作中經常會遇到單頁面多個上傳模組的功能,比如身份證正反面。使用plupload.js可以非常簡單的實現這個功能。 github下載地址 https://github.com/moxiecode/plupload/tree/master/js 新建plupload.htm

      傳智播客C語言視頻第二季 第一季基礎上增加諸多C語言案例講解，有效下載期為10 5-10 10關閉

      選擇結構 浮點型 轉義字符 3.4 聲明 位數 htm oid content 卷 backup 的文件夾 PATH 列表卷序列號為 00000025 D4A8:14B0J:.│ 1.txt│ c語言經典案例效果圖示.doc│ ├─1傳智播客_尹成_C語言從菜鳥

      angularJs 多文件動態上傳（刪除其中一個文件的時候，要麽file沒被刪除，要麽刪除了之後，點擊事件失效）

      頁面 this 識別 更新 百度 一次 files fileinput type <div cacModule.controller(‘CacScriptEditCtrl‘, CacScriptEditCtrl); CacScriptEditCtrl.$i

      TCP實現多個客戶端同時向同一個伺服器端傳送圖片，也可以同一個客戶端多次向伺服器傳送圖片。當上傳圖片大於一定的限度（這裡指定為了10k）時，則停止上傳，將已經接收到但未接收完的檔案刪除。

      伺服器端： //多使用者上傳圖片 import java.io.IOException; import java.net.ServerSocket; import java.net.Socket; public class UploadPicServer1 { public sta

      多組input檔案，每組 multiple選擇多張圖片上傳可增刪其中任意一張圖片

      input 、multiple選擇多張圖片時，需要刪除其中的一張圖片怎麼做，大家都知道 input 中的檔案是不能刪除和更改的，只能清空，這裡我的做法是 定義一個物件儲存器把需要的檔案存在儲存器中 formData，後臺不從Input中讀取，從物件儲存器中獲取檔案，一組圖片使

      plupload 在和 vue.js 多頁面引用時，報錯Cannot read property 'style' of null

      在一個頁面中引用了plupload.full.min.js 和 vue.js,在使用時報如下錯誤 百度發現報這個錯的基本上是dom結構與渲染樣式的載入順序造成的，而vue.js的頁面渲染不知道是哪裡和plupload有衝突，於是就先初始化plupload，再去new V

      android 仿QQ，微信群組裡的@功能，支援@多人，並能一鍵刪除，能獲取上傳對應的id（修改版）

      首先註明該文章是借籤別人的部落格，原文博文地址點選開啟連結 android 仿QQ，微信群組裡的@功能，支援@多人，並能一鍵刪除，能獲取上傳對應的id 這個需求來源：本人做整合環信聊天時，專案需要@功能，但是環信並沒有提供@功能。環信@功能地址點選開啟連結 輸入@符號之後進入

      關於php上傳多張圖片時，選擇圖片後就可以預覽的問題

      這幾天一直在解決一個問題，上傳圖片時選擇成功後就能預覽。 需求：在點選上傳圖示的時候會在前面的input框中顯示出檔名，然後點選後面的檢視按鈕就可以預覽選擇的這張圖片了，要求不能重新整理頁面 1.一開始的時候打算用ajax上傳，後來發現多張圖片一同上傳的時候會出現問題，a

      知名終端模擬軟體XSHELL多版本存在後門，或上傳使用者伺服器賬號密碼

      Xshell是一款強大,著名的終端模擬軟體，被廣泛的用於伺服器運維和管理,Xshell支援SSH，SFTP，TELNET，RLOGIN和SERIAL功能。它提供業界領先的效能和強大功能，在免費終端模擬軟體中有著不可替代的地位。企業版中擁有更專業的功能其中包括:標籤式的環境，動態埠轉發，自定義鍵對映，