一个主要的页面，其中包裹了一个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的实际使用（个人实操）
原文地址：http://www.cnblogs.com/moutudou/p/7794002.html