关键词:
一个主要的页面,其中包裹了一个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,上传一个,删除之前上传,才能继续上传
varuploader=newplupload.Uploader({runtimes:‘html5,flash,silverlight,html4‘,//用来指定上传方式,指定多个上传方式请使用逗号隔开。browse_button:‘browse‘,//触发文件选择对话框的按钮,为那个元素idcontainer:container,//用来指定Plupload所创建的html... 查看详情
plupload插件使用整理
Plupload参考:http://www.cnblogs.com/2050/p/3913184.htmlhttp://www.plupload.com/docs/js://上传,配置基本参数,事件,实例化functioninitPlupload(){//配置上传vm.uploader=newplupload.Uploader({runtimes:‘html5,flash‘,browse_butt 查看详情
plupload上传详细讲解,plupload多实例上传,plupload多个上传按钮--推荐使用
今天帮朋友解决 Plupload 上传的问题,查了很多资料,资料还是挺全的,但是有点零零散散的,故整理好,合并发出来。本教程包括: Plupload 上传详细讲。 Plupload 多实例上传。 Plupload&... 查看详情
使用 plupload 和 Rails 3 的 Amazon S3 分段上传
】使用plupload和Rails3的AmazonS3分段上传【英文标题】:AmazonS3MultipartUploadwithpluploadandRails3【发布时间】:2011-08-1309:06:35【问题描述】:Amazon具有分段上传功能,您可以将文件分块发送并在S3上组装。这允许一些不错的简历,例如上... 查看详情
Plupload - 上传时调整图像大小,使用最小高度和最小宽度而不是最大值
】Plupload-上传时调整图像大小,使用最小高度和最小宽度而不是最大值【英文标题】:Plupload-Resizeimageonupload,withaminimumheight,andminimumwidthinsteadofmaximum【发布时间】:2014-11-0515:35:54【问题描述】:我有一个Plupload上传器正在运行,它... 查看详情
使用fastadmin系统自带的图片上传plupload
首先,form表单需要具有如下代码<formclass="form-horizontal"role="form"method="POST"action=""><inputid="c-image"class="form-control"size="50"name="row[image]"type="text"value=""><span><buttontyp 查看详情
在服务器端处理 plupload 的分块上传
】在服务器端处理plupload的分块上传【英文标题】:Handlingplupload\'schunkeduploadsontheserver-side【发布时间】:2012-02-1903:13:32【问题描述】:当我使用plupload来分块文件(设置选项chunk_size)时,我会为每个块获得一个单独的PHP请求。查... 查看详情
commons-fileupload处理plupload多文件上传
web端使用plupload上传文件,支持文件多选,显示文件大小、上传进度。java服务器servlet保存客户端上传的文件,使用commons-fileupload-1.3.2组件HTML、JS代码<!doctypehtml><html><head><metahttp-equiv="Content-Type"content="text/html;char 查看详情
plupload 似乎没有在 IE 9 中上传文件。它适用于其他浏览器
】plupload似乎没有在IE9中上传文件。它适用于其他浏览器【英文标题】:pluploaddoesnotseemtobeuploadingfilesinIE9.Itworksinotherbrowsers【发布时间】:2014-01-2716:06:36【问题描述】:在我们的项目中,我们使用plupload上传单个excel文件。这适用... 查看详情
plupload:上传前验证图像尺寸?
】plupload:上传前验证图像尺寸?【英文标题】:plupload:validateimagedimensionsbeforeupload?【发布时间】:2021-06-0910:30:48【问题描述】:我检查了文档但找不到任何东西..有没有办法在上传之前验证文件的图像尺寸?我想为最小图像尺... 查看详情
如何使用 PLupload 发送附加数据?
】如何使用PLupload发送附加数据?【英文标题】:HowtosendadditionaldatausingPLupload?【发布时间】:2012-03-2102:01:04【问题描述】:我正在使用plupload进行ajax文件上传。现在plupload.Uploader类有很多选项,但没有一个是附加数据。例如:varu... 查看详情
iOS 上的 Plupload 仅适用于新照片,不适用于相机胶卷
】iOS上的Plupload仅适用于新照片,不适用于相机胶卷【英文标题】:PluploadwithiOSonlyworksfornewphotos,notforcameraroll【发布时间】:2016-03-0400:28:55【问题描述】:我正在使用plupload1.5.8来上传图像文件,除了iOS外,它都很好用。在iOS9.2.x... 查看详情
Plupload .csv 问题
】Plupload.csv问题【英文标题】:Plupload.csvissue【发布时间】:2012-08-0306:41:09【问题描述】:我正在使用Plupload将.csv文件上传到我的网站。除了在文件选择模型中没有正确过滤.csv文件的问题外,它工作正常。这是我用来过滤.csv文... 查看详情
大文件上传组件webupload插件
...调整和配置,自己将大小都以501M来进行限制。第一步:前端修改由于项目使用的是BJUI前端框架,并没有使用框架本身的文件上传控件,而使用的基于jQuery的Uploadify 查看详情
哪个javascript框架支持ajax方式的文件上传
...作,可以在FF3.6+、Safari4+、Chrome等浏览器中完美运行。4.Plupload这是一个针对CMS或类似系统的、高度可用的上传插件。支持分块、拖拽、图像缩放、限制文件大小、显示上传进度等。5.UploadifyUploadify是一个jQuery插件,帮助你在网站... 查看详情
Laravel + Plupload 上传到 S3 响应以进行预检无效 - CORS
】Laravel+Plupload上传到S3响应以进行预检无效-CORS【英文标题】:Laravel+PluploaduploadingtoS3responseforpreflightisinvalid-CORS【发布时间】:2016-03-0407:41:05【问题描述】:我正在Nginx服务器上测试将plupload上传到S3。整个项目基于Laravel。问题是... 查看详情
sublimetext3前端开发插件配置以及使用(个人喜爱)
第一步下载软件接着Ctrl+~(回车)把下面安装包管理添加到sublimeimporturllib.request,os;pf=‘PackageControl.sublime-package‘;ipp=sublime.installed_packages_path();urllib.request.install_opener(urllib.request.build_opener(urllib. 查看详情
前端直传oss(代码片段)
...所示。 解压事例之后,可以在demo体验,采用了Plupload,功能比较强大理解他的案例花 查看详情