最近在做專案的時候發現了一個前端的上傳元件——plupload，用起來非常nice，工作之餘自己試著學習了下。但是發現官網或者部落格上的教程不是很到位，於是就自己總結了一下。

現在把配置分享給大家~

先放個效果圖

這個外掛功能多強大，外觀多漂亮，這裡就不再贅述了，網上一大堆，下面我把程式碼貼上。

• 1、先引入js和css（注意引入順序）

<!-- 1、先引入jQuery -->
<script type="text/javascript" src="${ctx }/js/jquery.min.js"></script>
 


<!-- 2、引入css -->
<link type="text/css" rel="stylesheet" href="${ctx }/js/jquery.plupload.queue/css/jquery.plupload.queue.css">

<!-- 3、引入plupload.full.min.js -->
<script type="text/javascript" src="${ctx }/js/plupload.full.min.js"></script>

<!-- 4、引入jQuery.plupload.queue.js -->
 

<script type="text/javascript" src="${ctx }/js/jquery.plupload.queue/jquery.plupload.queue.js"></script>

<!-- 5、引入cn.js（或者zh_CN.js） -->
<script type="text/javascript" src="${ctx }/js/i18n/zh_CN.js"></script>

這裡忘了放上js的資源列表，馬上補上。

• 2、接著寫html程式碼（只有一個div，so easy）

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

• 3、然後是JS初始化方法與呼叫。（url大家根據自己實際情況來寫。我們這裡只討論前臺外掛，後臺上傳程式碼又是一項技術了，大家可以自行百度一下。。。）

$(function() {

    //例項化
    $("#uploader").pluploadQueue({
        //用來指定上傳方式,有順序
        runtimes : 'html5,flash,silverlight,html4',

        url : '${ctx }/UploadServlet',

        //分片上傳檔案時，每個檔案大小
        chunk_size: '200kb',

        //點選標題時，是否可以重新命名
        rename : true,

        //是否支援拖拽上傳
        dragdrop: true,

        filters : {
            // 最大檔案大小
            max_file_size : '10mb',

            // 支援上傳格式
            mime_types: [
                {title : "Image files", extensions : "jpg,gif,png"},
                {title : "Zip files", extensions : "zip"},
                {title : 'Jsp files',extensions : "jsp"}
            ]
        },

        // 對將要上傳的圖片進行壓縮
        resize : {width : 320, height : 240, quality : 90},

        // 當需要使用swf方式進行上傳時需要配置該引數
        flash_swf_url : '${ctx }/js/Moxie.swf',

        // 當需要使用silverlight方式進行上傳時需要配置該引數
        silverlight_xap_url : '${ctx }/js/Moxie.xap'
    });

});

大功告成，試一試吧，100%可以用。

接下來附上一點資源。。。

plupload官網：http://www.plupload.com/

大牛寫的技術指南： http://www.cnblogs.com/2050/p/3913184.html

大牛寫的其他demo： http://chaping.github.io/plupload/demo/