前端上傳插件Plupload的實際使用（個人實操）

一個主要的頁面，其中包裹了一個iframe頁面，在項目中，這個iframe頁面包裹在主頁面的div標簽中，主要用於上傳文件附件。

用的是plupload.full插件，主要引入以下幾個js：

jquery-1.11.1.js；

moxie.js；

plupload.full.min.js；

plupload.dev.js；

css部分：

jquery.plupload.queue.css；

以下是利用該插件實現的完整的前端代碼：

$(window).load(function () {
　　var uploader = $("#uploader").pluploadQueue({
　　　　browse_button : 'uploader_browse',//開啟文件上傳的按鈕id
　　　　runtimes: 'html5,flash,silverlight,html4',
　　　　url: "地址為傳輸數據地址"
　　　　max_file_size: '10mb',//最大附件大小
　　　　unique_names: true,//默認為false。當值為true時會為每個上傳的文件生成一個唯一的文件名，並作為額外的參數post到服務器端，參數明為name,值為生成的文件名。
　　　　chunk_size: '2mb',
　　　　unique_names: false,
　　　　flash_swf_url: '<%=contextPath%>/scripts/plupload/js/Moxie.swf',
　　　　silverlight_xap_url: '<%=contextPath%>/scripts/plupload/js/Moxie.xap',
　　　　preinit: {
　　　　　　UploadComplete: function () {
　　　　　　　　window.location.reload();
　　　　　　}
　　　　}
});
uploader.init();
$('form').submit(function (e) {
　　var uploader = $('#uploader').pluploadQueue();
　　if (uploader.files.length > 0) {
　　// When all files are uploaded submit form
　　uploader.bind('StateChanged', function () {
　　　　if (uploader.files.length === (uploader.total.uploaded +         uploader.total.failed)) {
　　　　$('form')[0].submit();
　　　　}
　　});
　　uploader.start();
　　} else {
　　    //alert('請先上傳數據文件.');
　　}
　　return false;
});

if (uploader == null) {
　　return;
}
uploader.bind('UploadComplete', function (uploader, files) {
    window.location.reload();
});

uploader.bind('FilesAdded', function (uploader, files) {

    var _h = 37;
    if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
    _h = 35;
    }
    if (uploader.files.length > 0) {
        $(".moxie-shim").css({top: $(".plupload_add").position().top - _h + (_h)});
    } else {
    $(".moxie-shim").css({top: $(".plupload_add").position().top - _h});
    }
    window.parent.SetCwinHeight2("claimFileList");
    });

uploader.bind('FilesRemoved', function (uploader, files) {
    var _h = 37;
    if (navigator.userAgent.indexOf("MSIE 6.0") > 0) {
    _h = 35;
    }
    if (uploader.files.length > 0) {
    $(".moxie-shim").css({top: $(".plupload_add").position().top - _h + (_h)});
    } else {
    $(".moxie-shim").css({top: $(".plupload_add").position().top});
    }
    window.parent.SetCwinHeight2("claimFileList");
});

uploader.bind('BeforeUpload', function (uploader, files) {
　　var docName = $(".plupload_delete .plupload_file_name").text();
　　var urlStr = "上傳參數保存地址"
　　uploader.setOption("url", urlStr);

　　var EASFileDocName = "";
　　var items = $("#SelectorOptions a");
　　for (var i = 0; i < items.length; i++) {
　　if (items[i].innerText) {
　　　　EASFileDocName += "&eas&" + items[i].innerText;
　　　　}
　　}
　　if (EASFileDocName.indexOf("&eas&" + docName) < 0) {
　　　　EASFileDocName += "&eas&" + docName;
　　}
　　EASFileDocName = EASFileDocName.substring(5);
　　　　setCookie("EASFileDocName", EASFileDocName, 365);
　　});

　　var EASFileDocName = getCookie("EASFileDocName");
　　　　if (EASFileDocName) {
　　　　var dns = EASFileDocName.split("&eas&");
　　　　for (var i = 0; i < dns.length; i++) {
　　　　$("#SelectorOptions").append("<li><a href='javascript:void(0)'>" + dns[i] + "</a></li>");
　　　　}
　　}

var items = $("#SelectorOptions a");
    $("#SelectorArr").click(function () {
    $("#SelectorOptions")[0].style.display = $("#SelectorOptions")[0].style.display == "block" ? "none" : "block";
    });
    for (var i = 0; i < items.length; i++) {
        items[i].onclick = function () {
        $("#SelectorOptions").hide();
        $("#docNameInput").val(this.innerText);
        };
    }
});
function testForm() {

}
function deleteFile(id){
    var onReturn = confirm("確認刪除附件嗎?");
    if(!onReturn){
    return;
    }
document.getElementById('fileId').value = id;
　　loadingBox_simple();
　　var action = "刪除文件時的數據發送地址";
　　document.getElementById('listfile').action = action;
　　document.getElementById('listfile').submit();
　}

function viewDoc_old(docFile) 
    { 
    XMLHttp.sendReq("post", "url"" , function(http_request){
    var rspText=http_request.responseText;
    var isTrue=false;
    if(rspText!=""){
    var results=http_request.responseXML;
    var rsflag=results.getElementsByTagName("rsflag")[0].childNodes;
    var flag=getNodeValue(rsflag[0]);
    }else{
        isTrue=false;
    //轉換錯誤
    MessageBox.alert("\u751f\u6210\u9884\u89c8\u6587\u6863\u5931\u8d25\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5\uff01");
            return;
        }
    });
} 

function viewDoc(docFile){
    var path = 'url';
    // var params = 'claimNo='+claimNo;
    var params = '';

    XMLHttp.sendReq("post", path,params, showResultInfo);
    MessageBox.alert("正在生成文檔預覽視圖，請稍候...");
}

    function showResultInfo(http_request){
        var rspText=http_request.responseText;
        alert(rspText);
        if(rspText!=""){
            cancelDivBox("screen_div_p","screen_box_p","screen_iframe_p");
            MessageBox.alert(rspText);
    }
}                                          

　　這些為前端利用插件對附件進行上傳的代碼，在本人目前參與的項目中有效。

　　需要使用指南可參考該地址：http://www.cnblogs.com/2050/p/3913184.html

（該插件在谷歌主流樓瀏覽器內沒問題，但是在IE和火狐就有bug，在本人此次的項目中，不管用哪個版本的插件，bug是一直存在的（即在ie和火狐中第一次點擊無效），所以只能想其他辦法，而我的辦法是在頁面加載完之后，對iframe頁面進行一個首次刷新，具體見下頁）