前端上传插件Plupload的实际使用(个人实操)

时间:2022-02-24 04:24:40

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