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

前端上传插件Plupload的实际使用(个人实操)的更多相关文章

  1. 前端上传组件Plupload使用指南

    我之前写过一篇文章<文件上传利器SWFUpload使用指南>,里面介绍了上传组件SWFUpload的使用方法,但现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SW ...

  2. 【转】前端上传组件Plupload

    [转自博客园-无双] html5原生的给我们提供了文件上传的API,Plupload是一款由著名的web编辑器TinyMCE团队开发的上传组件,简单易用且功能强大,我们完全可以使用Plupload来代 ...

  3. 【转】前端上传组件Plupload使用指南

    http://www.cnblogs.com/2050/p/3913184.html Plupload有以下功能和特点: 1.拥有多种上传方式:HTML5.flash.silverlight以及传统的 ...

  4. [Pulgin] 前端上传组件Plupload使用指南

    我之前写过一篇文章<文件上传利器SWFUpload使用指南>,里面介绍了上传组件SWFUpload的使用方法,但现在随着html5技术的逐渐推广和普及,再去使用以flash为上传手段的SW ...

  5. 文件上传插件 -- plupload

    refresh:重新实例化uploader removeFile(id):从file中移除某个文件 splice(start,length):从队列中start开始删除length个文件, 返回被删除 ...

  6. 前端上传组件 - Plupload

    http://www.cnblogs.com/KTblog/p/4740852.html 效果: 起始界面. ------------- 可以上上传单个文件. ------------- 可以上传多个 ...

  7. 多图片/文件上传 - SwfUpload/PlUpload

    <文件上传利器SWFUpload使用指南> <前端上传组件Plupload使用指南>

  8. JEECG 上传插件升级-标签

    前言: 现有的uploadify上传是基于swf的,随着H5的普及,flash即将退出历史舞台,JEECG团队本着与时俱进的原则,将全面升级JEECG系统中的上传功能,采用新式上传插件plupload ...

  9. JEECG 上传插件升级-代码生成器

    前言: 现有的uploadify上传是基于swf的,随着H5的普及,flash即将退出历史舞台,JEECG本着与时俱进的原则,将全面升级JEECG系统中的上传功能,采用新式上传插件plupload,此 ...

随机推荐

  1. js 改变对象的引用地址

    在业务处理中我们经常会碰到列表中有编辑和新增按钮,为了能够提高代码的公用性,我们经常会使用同一组件处理. 这样会出现一个问题就是编辑的时候直接把对象传过去,直接赋值,引用地址是同一个,所以不管修改了那 ...

  2. Python下使用Psyco模块优化运行速度

    今天介绍下Psyco模块,Psyco模块可以使你的Python程序运行的像C语言一样快.都说Python语言易用易学,但性能上跟一些编译语言(如C语言)比较要差不少,这里可以用C语言和Python语言 ...

  3. AtCoder Grand Contest 012 C:Tautonym Puzzle

    题目传送门:https://agc012.contest.atcoder.jp/tasks/agc012_c 题目翻译 如果一个字符串是好的,那么这个字符串的前半部分和后半部分肯定一模一样.比如\(a ...

  4. hibernate学习四 hibernate关联关系映射

    在Hibernate中对象之间的关联关系表现为数据库中表于表之间的关系(表之间通过外键关联). 1 单向的一对一 主键关联  外键关联 2 单向的一对多 3 单向的多对一 4 单向的多对多 5 双向的 ...

  5. 获取access_token时却报出下列错误信息:{"errcode":40164,"errmsg":"invalid ip 61.172.68.219, not in whitelist hint: [KJZfAa0644e575]"},以及一些其他报错

    获取access_token时却报出下列错误信息:{"errcode":40164,"errmsg":"invalid ip 61.172.68.21 ...

  6. Centos Mininal最小安装

    第一步.下载Minimal镜像,http://mirrors.163.com/centos/7/isos/x86_64/ 第二步.安装VMWare,在VMWare上新建一个Centos虚拟机,可以在建 ...

  7. 【Data Structure & Algorithm】求子数组的最大和

    求子数组的最大和 题目:输入一个整型数组,数组里有正数和负数.数组中连续的一个或多个整数组成一个子数组,每个子数组都有一个和.求所有子数组的和的最大值,要求时间复杂度为O(n).例如输入数组为1, - ...

  8. springMVC拦截配置

    1.web.xml文件配置 <!-- spring mvc --> <servlet> <servlet-name>DispatcherServlet</se ...

  9. 为什么用思科里面的设备第一次ping的时候总会丢一个包呢?

    大家搞计算机的不用讲,肯定都玩过网络吧?   比如一些思科,华为,华三这些模拟器,你们总会当你第一次用某个设备去ping某个设备的时候第一包总会被丢弃.  但我相信很多人都不知道为啥 会丢弃. 今天小 ...

  10. java 关于getProperty()方法中反斜杠问题

    问: 在配置文件a.properties中有一行path=C:\test在java中getProperty("path")后,java把\t认为是一个字符TAB.怎样才能取到正确的 ...