`
annan211
  • 浏览: 459415 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

plupload 的使用

 
阅读更多
第一步 引入库文件

<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使用

    "uploadify与plupload使用"这个主题主要探讨了两种常用的JavaScript文件上传插件:uploadify和plupload。这两种工具都旨在简化多文件上传的过程,并提供丰富的自定义选项以适应各种项目需求。 **uploadify** ...

    Plupload使用.doc

    3. **实例化 Plupload 对象**:使用 JavaScript 实例化一个 `plupload.Uploader` 对象,并传入配置参数,包括指定触发文件选择的按钮 ID、运行环境、服务器端的上传地址以及 SWF 和 Silverlight 文件路径。...

    plupload 上传组件的使用

    在本文中,我们将深入探讨plupload的主要功能,并通过一个简单的示例来了解其使用方法。 **1. 多文件上传** plupload支持同时上传多个文件,用户可以选择多个文件一次性上传,极大地提高了上传效率。这种功能在...

    Plupload 上传.net MVC 上传示例

    本示例将详细介绍如何在.NET MVC项目中集成并使用Plupload。 1. **Plupload组件介绍** Plupload设计的目标是克服传统文件上传方式的局限性,如单文件上传、大小限制、浏览器兼容性问题等。它支持拖放上传、预览...

    plupload-php+批量上传jquery[附加说明书版].zip

    在压缩包中的"plupload使用说明.doc"文档中,通常会包含以下内容: 1. **安装指南**:如何引入Plupload的JavaScript和CSS文件,以及如何设置HTML结构。 2. **配置选项**:Plupload有许多可配置的选项,如URL...

    plupload实现多图片上传

    在本文中,我们将深入探讨Plupload的实现原理、主要特性、使用方法以及如何在实际项目中实现多图片上传。 ### 一、Plupload实现原理 Plupload 使用 Flash、Silverlight、HTML5 和 Gears 技术来实现跨浏览器的文件...

    Plupload-S3-Pre-Signed-Urls:这是一个关于如何修补 Plupload 库以使 Plupload 能够使用预签名 URL 将文件 PUT 到 Amazon S3 的实验

    使用 Plupload 使用 PUT 和预签名 URL 将文件直接上传到 Amazon S3 (在) 开箱即用,Plupload 被硬编码为在上传文件时使用 POST 方法。 这很好,除非您想使用预签名、查询字符串验证的 URL 将文件直接上传到 Amazon...

    plupload附件上传

    在本篇文章中,我们将深入探讨Plupload的工作原理、特性以及如何在项目中集成和使用它。 1. **工作原理** Plupload 使用Flash、Silverlight、HTML5、Gears以及BrowerPlus等技术来实现跨浏览器的文件上传。它会根据...

    一次将多个文件上传到Matrix,由Plupload提供支持_C.zip

    - **异步上传**:Plupload使用XMLHttpRequest或Web API(如HTML5的File API)进行异步文件上传,避免了页面刷新,提高了用户体验。 - **分块上传**:对于大文件,Plupload会将其切分成小块上传,确保在上传过程中...

    PHP实例开发源码—Plupload ajax批量上传插件php版.zip

    2. **Ajax技术**:Plupload使用Ajax进行文件上传,这意味着你需要理解XMLHttpRequest对象或者使用jQuery等库的Ajax方法,以及异步数据传输的工作原理。 3. **Plupload插件**:深入研究Plupload的API,包括设置参数...

    plupload:使用plupload上传大文件

    以下是对Plupload使用及核心知识点的详细解释: 1. **多浏览器兼容性**:Plupload 的一大亮点是其对各种浏览器的良好支持,包括Internet Explorer 6+、Firefox、Chrome、Safari 和 Opera,这得益于它采用的Flash、...

    文件上传控件PlupLoad 的使用

    本文将深入探讨PlupLoad的使用方法和核心特性。 ### 1. PlupLoad简介 PlupLoad是一款基于JavaScript的开源文件上传组件,它使用了Flash、HTML5等多种技术,确保在各种浏览器环境下都能提供稳定的文件上传功能。...

    ember-plupload, 使用plupload处理上传的Ember组件.zip

    ember-plupload, 使用plupload处理上传的Ember组件 {{pl-uploader}} {{pl-uploader}} 是一个ember组件,为 Plupload提供了一个 API 。 上载是应用程序( 他们在后台继续) 中的持久accross路由。你必须提供 NAME

    plupload struts2 jsp上传

    将Plupload与Struts2和JSP结合使用,可以构建出高效、用户体验良好的文件上传功能。 在"plupload struts2 jsp上传"这个主题中,我们需要关注以下关键知识点: 1. **Plupload组件**:Plupload提供了一个跨浏览器的...

    plupload(php+ASP版

    这款组件的版本plupload-2.1.9不仅提供了PHP的支持,还特别针对ASP环境进行了扩展,使得使用ASP进行文件批量上传成为可能。这对于那些仍然使用ASP作为后端语言的网站或者开发者来说,是一个非常实用的功能。 ...

    基于plupload上传至阿里云oss源码

    在本示例中,“基于plupload上传至阿里云oss源码”指的是使用Plupload这一JavaScript文件上传库来实现向阿里云OSS上传文件的功能。Plupload是一款强大的多浏览器、多模式(Flash, HTML5, Silverlight, BrowserPlus)...

    springboot整合plupload,实现文件批量上传、断点续传、秒传 源码

    在本文中,我们将深入探讨如何使用SpringBoot框架与Plupload工具进行集成,以实现文件的批量上传、断点续传和秒传功能。这个项目基于SpringBoot 2和Plupload 2.3.6,提供了直观的上传进度条,并且是在IntelliJ IDEA...

    .net plupload文件上传源码

    .NET Plupload 文件上传源码是基于流行的开源多浏览器文件上传组件Plupload的.NET实现。Plupload是一个强大的JavaScript库,它支持各种浏览器,并提供多种功能,如分块上传、进度条显示、多文件选择等。本源码实现了...

Global site tag (gtag.js) - Google Analytics