前端上传插件Plupload的实际使用（个人实操）

Posted 2020-10-15 Lilian

一个主要的页面，其中包裹了一个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页面进行一个首次刷新，具体见下页）