第一步 引入库文件
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plupload/plupload.full.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plupload/jquery.plupload.queue/jquery.plupload.queue.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plupload/plupload.browserplus.js"></script>
<!-- 国际化中文支持 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/plupload/i18n/zh_CN.js"></script>
第二步 标签
<div style="width:500px; margin:left; position:relative;">
<div id="uploader_statementPic">
<p>您的浏览器未安装 Flash, Silverlight, Gears, BrowserPlus 或者支持 HTML5 .</p>
</div>
<input value="重新上传" id="Reload_statementPic" type="button">
</div>
第三步 上传并返回值
$(function(){
function plupload(name){
$("#"+name).val(null);
$("#uploader_"+name).pluploadQueue({
// General settings
url : '/service/pluploadImage.do',
runtimes : 'html5,gears,browserplus,silverlight,flash,html4',
max_file_size : '40mb',
unique_names: true,
chunk_size: '20mb',
// responseType: 'json',
// Specify what files to browse for
filters : [
{title: "Image files", extensions: "*"},
{title: "Zip files", extensions: "zip"}
],
resize: {width: 640, height: 480, quality: 90},
// Flash settings
flash_swf_url: '/js/plupload/plupload.flash.swf',
// Silverlight settings
silverlight_xap_url: '/js/plupload/plupload.silverlight.xap',
// multipart_params: {"file":file.id} ,
preinit : {
Init: function(up, info) { },
UploadFile: function(up, file) { },
FileUploaded: function(up, file, info) {
}
},
init : {
FileUploaded :function(up, file, res){//这个地方用于 返回已经上传的文件值 前提是后台一定要返回哦
retObject = eval("(" + res.response + ")");
var atta = retObject.message;
if($("#"+name).val()== null || $("#"+name).val()==''){
$("#"+name+"").val(atta);
}else{
$("#"+name).val($("#"+name).val()+","+atta);
}
}
}
});
}
plupload('idCardPic');
plupload('statementPic');
plupload('bankCardPic');
$('#Reload_idCardPic').click(function(){
$("#idCardPic").val(null);
plupload("idCardPic");
});
$('#Reload_statementPic').click(function(){
$("#statementPic").val(null);
plupload("statementPic");
});
$('#Reload_bankCardPic').click(function(){
$("#bankCardPic").val(null);
plupload("bankCardPic");
});
});
分享到:
相关推荐
"uploadify与plupload使用"这个主题主要探讨了两种常用的JavaScript文件上传插件:uploadify和plupload。这两种工具都旨在简化多文件上传的过程,并提供丰富的自定义选项以适应各种项目需求。 **uploadify** ...
3. **实例化 Plupload 对象**:使用 JavaScript 实例化一个 `plupload.Uploader` 对象,并传入配置参数,包括指定触发文件选择的按钮 ID、运行环境、服务器端的上传地址以及 SWF 和 Silverlight 文件路径。...
在本文中,我们将深入探讨plupload的主要功能,并通过一个简单的示例来了解其使用方法。 **1. 多文件上传** plupload支持同时上传多个文件,用户可以选择多个文件一次性上传,极大地提高了上传效率。这种功能在...
本示例将详细介绍如何在.NET MVC项目中集成并使用Plupload。 1. **Plupload组件介绍** Plupload设计的目标是克服传统文件上传方式的局限性,如单文件上传、大小限制、浏览器兼容性问题等。它支持拖放上传、预览...
在压缩包中的"plupload使用说明.doc"文档中,通常会包含以下内容: 1. **安装指南**:如何引入Plupload的JavaScript和CSS文件,以及如何设置HTML结构。 2. **配置选项**:Plupload有许多可配置的选项,如URL...
在本文中,我们将深入探讨Plupload的实现原理、主要特性、使用方法以及如何在实际项目中实现多图片上传。 ### 一、Plupload实现原理 Plupload 使用 Flash、Silverlight、HTML5 和 Gears 技术来实现跨浏览器的文件...
使用 Plupload 使用 PUT 和预签名 URL 将文件直接上传到 Amazon S3 (在) 开箱即用,Plupload 被硬编码为在上传文件时使用 POST 方法。 这很好,除非您想使用预签名、查询字符串验证的 URL 将文件直接上传到 Amazon...
在本篇文章中,我们将深入探讨Plupload的工作原理、特性以及如何在项目中集成和使用它。 1. **工作原理** Plupload 使用Flash、Silverlight、HTML5、Gears以及BrowerPlus等技术来实现跨浏览器的文件上传。它会根据...
- **异步上传**:Plupload使用XMLHttpRequest或Web API(如HTML5的File API)进行异步文件上传,避免了页面刷新,提高了用户体验。 - **分块上传**:对于大文件,Plupload会将其切分成小块上传,确保在上传过程中...
2. **Ajax技术**:Plupload使用Ajax进行文件上传,这意味着你需要理解XMLHttpRequest对象或者使用jQuery等库的Ajax方法,以及异步数据传输的工作原理。 3. **Plupload插件**:深入研究Plupload的API,包括设置参数...
以下是对Plupload使用及核心知识点的详细解释: 1. **多浏览器兼容性**:Plupload 的一大亮点是其对各种浏览器的良好支持,包括Internet Explorer 6+、Firefox、Chrome、Safari 和 Opera,这得益于它采用的Flash、...
本文将深入探讨PlupLoad的使用方法和核心特性。 ### 1. PlupLoad简介 PlupLoad是一款基于JavaScript的开源文件上传组件,它使用了Flash、HTML5等多种技术,确保在各种浏览器环境下都能提供稳定的文件上传功能。...
ember-plupload, 使用plupload处理上传的Ember组件 {{pl-uploader}} {{pl-uploader}} 是一个ember组件,为 Plupload提供了一个 API 。 上载是应用程序( 他们在后台继续) 中的持久accross路由。你必须提供 NAME
将Plupload与Struts2和JSP结合使用,可以构建出高效、用户体验良好的文件上传功能。 在"plupload struts2 jsp上传"这个主题中,我们需要关注以下关键知识点: 1. **Plupload组件**:Plupload提供了一个跨浏览器的...
这款组件的版本plupload-2.1.9不仅提供了PHP的支持,还特别针对ASP环境进行了扩展,使得使用ASP进行文件批量上传成为可能。这对于那些仍然使用ASP作为后端语言的网站或者开发者来说,是一个非常实用的功能。 ...
在本示例中,“基于plupload上传至阿里云oss源码”指的是使用Plupload这一JavaScript文件上传库来实现向阿里云OSS上传文件的功能。Plupload是一款强大的多浏览器、多模式(Flash, HTML5, Silverlight, BrowserPlus)...
在本文中,我们将深入探讨如何使用SpringBoot框架与Plupload工具进行集成,以实现文件的批量上传、断点续传和秒传功能。这个项目基于SpringBoot 2和Plupload 2.3.6,提供了直观的上传进度条,并且是在IntelliJ IDEA...
.NET Plupload 文件上传源码是基于流行的开源多浏览器文件上传组件Plupload的.NET实现。Plupload是一个强大的JavaScript库,它支持各种浏览器,并提供多种功能,如分块上传、进度条显示、多文件选择等。本源码实现了...