当前位置:首页 > 开发 > Web前端 > 前端 > 正文

plupload 的使用

发表于: 2013-12-11   作者:annan211   来源:转载   浏览次数:
摘要: 第一步 引入库文件 <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/js/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css">
第一步 引入库文件

<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");
	    });
	  });

plupload 的使用

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
最近弄项目需要一个异步的图片上传图片组件,首先选择了swfupload,但是在使用中发现火狐下莫名其妙
最近弄项目需要一个异步的图片上传图片组件,首先选择了swfupload,但是在使用中发现火狐下莫名其妙
说明:Plupload支持多种浏览器,多种上传方式! 一般的WEB方式文件上传只能使用FileUpload控件进行
  之前使用过很多的上传组件,但对各种浏览器的兼容性太差,不得不放弃!!   plupload 是款很
前端上传组件Plupload使用指南 我之前写过一篇文章《文件上传利器SWFUpload使用指南》,里面介绍了
Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。
Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度、图像自动缩略和上传分块。
前天发的 图片压缩后上传[Flash] ,有园友评论说和 Plupload 有点像! 特地了解了一下Plupload。 Pl
找一个好的上传插件不容易啊,最近看好一个上传插件,查了些网上质料,自己做了些改动,记录下来,
最近需要处理点上传文件方面的东西,需求就是点击一个上传按钮之后出现一个弹出框样式的上传插件,
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号