關於Plupload結合上傳插件jquery.plupload.queue的使用

時間 2019-11-12

標籤關於 plupload 結合上傳插件 jquery.plupload.queue jquery queue 使用欄目 JQuery 简体版

原文原文鏈接

　　以前使用過不少的上傳組件，但對各類瀏覽器的兼容性太差，不得不放棄！！

　　plupload 是款很強大的上傳組件，不得不推薦。plupload 前端根據瀏覽器不一樣選擇使用Html五、 Gears, Silverlight, Flash, BrowserPlus來對文件進行客戶端優化，好比大圖片的壓縮，大文件分塊上傳，上傳進度條、多文件上傳等。官方網站：http://plupload.com/

效果截圖：

配置文檔說明：javascript

Browse_button:觸發瀏覽文件按鈕標籤的惟一id,,在flash、html五、和silverlight中能找到觸發事件的源（我理解的，這個參數在隊列部件不須要參見） php

Container: 展示上傳文件列表的容器，[默認是body]css

chunk_size：當上傳文件大於服務器接收端文件大小限制的時候，能夠分屢次請求發給服務器，若是不須要從設置中移出html

drop_element：當瀏覽器支持拖拽的狀況下，可以文件拖放到你想要的容器ID裏前端

file_data_name：設置上傳字段的名稱。默認狀況下被設置爲文件。（我試驗了沒找到該如何使用它，暫且不提）html5

filters:選擇文件擴展名的過濾器,每一個過濾規則中只有title和ext兩項[{title:'', extensions:''}]java

flash_swf_url:flash文件地址jquery

headers：自定義的插入http請求的鍵值對web

max_file_size：最大上傳文件大小（格式100b, 10kb, 10mb, 1gb）chrome

multipart：布爾值，若是用mutlipart 代替二進制流的方式，在webkit下沒法工做

multipart_params：跟 multipart關聯在一塊兒的鍵值對

multi_selection：多選對話框

resize：修改圖片屬性 resize: {width: 320, height: 240, quality: 90}

runtimes:上傳插件初始化選用那種方式的優先級順序，若是第一個初始化失敗就走第二個，依次類推

required_features：須要那些特性，才能初始化插件

url：上傳服務器地址

unique_names：是否生成惟一的文件名，避免與服務器文件重名

urlstream_upload：布爾值若是是flash上傳應該用URLStream 代替FileReference.upload

jquery部件的屬性：

dragdrop：是否支持拖拽，默認值true

multiple_queues：是否能夠屢次上傳

preinit：插件初始化前回調函數

rename：布爾值，上傳以前能夠重命名文件，默認false，木有找到如何重命名啊

API文檔：

方法列表：

　　Uploader(setting)：建立實例的構造方法

 
         var uploader = new plupload.Uploader({ 
        
             runtimes : 'gears,html5,flash', 
        
             browse_button : 'button_id' 
        
         });

　　bind(event, function[, scope])：綁定事件

 
         uploader.bind('Init', function(up) { 
        
             alert('Supports drag/drop: ' + (!!up.features.dragdrop)); 
        
         });

　　destroy()：銷燬plupload的實例對象

uploader.destroy()

　　getFile(id): 獲取上傳文件信息

 
         uploader.bind('FilesAdded', function(up, files) { 
        
             for (var i in files) { 
        
                 up.getFile(files[i].id);        
        
             } 
        
         });<span style="color: #ff0000; font-size: 13px;">　</span>

注：file：{
　　id:文件編號,
　　loaded: 已經上傳多少字節,
　　name: 文件名,
　　percent: 上傳進度,
　　size: 文件大小,
　　status: 有四種狀態 QUEUED, UPLOADING, FAILED, DONE.對應數值
}

init:初始化plupload實例，添加監聽對象

uploader.destroy()

　　refresh：從新實例化uploader

　removeFile(id):從file中移除某個文件

　　splice(start,length)：從隊列中start開始刪除length個文件，返回被刪除的文件列表

　　start() 開始上傳

stop()中止上傳

　　unbind(name, function): 接觸事件綁定

　　unbindAll()解綁全部事件

　屬性集合：

features：uploader中包含那些特性

files:當前隊列中的文件列表

id：uploader實例的惟一id

runtime：當前運行環境（是html五、flash等等)

state:當前上傳進度狀態

total：當前上傳文件的信息集合

事件集合:（up爲uploader縮寫）

BeforeUpload(up, file)：文件上傳完以前觸發的事件

ChunkUploaded(up, file,response)文件被分塊上傳的事件

Destroy(up):uploader的destroy調用的方法

Error(up, err)：上傳出錯的時候觸發

Fileadded(up, files):用戶選擇文件時觸發

FileRemoved(up, files):當文件從上傳隊列中移除觸發

FileUploaded(up, file, res):文件上傳成功的時候觸發

Init(up):當初始化的時候觸發

PostInit(up):init執行完之後要執行的事件觸發

QueueChanged(up):當文件隊列變化時觸發

Refresh(up):當silverlight/flash或是其餘運行環境須要移動的時候觸發

StateChanged(up)當整個上傳隊列被改變的時候觸發

UploadComplete(up,file)當隊列中全部文件被上傳完時觸發

UploadFile(up,file)當一個文件被上傳的時候觸發

UploadProgress(up,file):當文件正在被上傳中觸發

參見：

示例：http://plupload.com/example_queuewidget.php

API:http://plupload.com/plupload/docs/api/index.html

事例代碼：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">

<script type="text/javascript" src="common/plupload/moxie.js"></script>
<script type="text/javascript" src="common/plupload/plupload.dev.js"></script>

<!-- Load Queue widget CSS and jQuery -->
<style type="text/css"> @importurl(common/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css);</style>

<script type="text/javascript" src="http://www.iadpush.com/assets/common/jquery-1.8.2.min.js"></script>

<!-- Thirdparty intialization scripts, needed for the Google Gears and BrowserPlus runtimes -->
<script type="text/javascript" src="http://bp.yahooapis.com/2.4.21/browserplus-min.js"></script>

<!-- Load plupload and all it's runtimes and finally the jQuery queue widget -->
<script type="text/javascript" src="common/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js"></script>

</head>

<body>
<div id="uploader">
    <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>

<script>
    $('#uploader').pluploadQueue({
        url : 'Upload',
        filters : [ {
            title : "Image files",
            extensions : "jpg,gif,png"
        } ],
        rename : true,
        flash_swf_url : 'common/plupload/Moxie.swf',
        silverlight_xap_url : 'common/plupload/Moxie.xap',
        filters : {
            max_file_size : '100mb',
            mime_types : [ {
                title : "Image files",
                extensions : "jpg,gif,png"
            }, {
                title : "Zip files",
                extensions : "zip,apk,doc,exe"
            } ]
        }
    });
</script>
</body>
</html>