WebUploader 插件使用

1、选择图片按钮以及提示信息：

// 验证文件是否选择，由后台传入，0_文件为空，1_文件不为空
<input id="filecheck" name="filecheck" type="hidden" value="${empty apphomepageApplicationPage.normalcoverimg?'0':'1'}">
// 文件图片路径 供提交保存路径来使用
<input id="fileurl" name="fileurl" type="hidden" value="${apphomepageApplicationPage.normalcoverimg }">
<tr>
	<td align="right">
		<label class="Validform_label">
			图标:
		</label>
	</td>
	<td class="value">
		 <fieldset>
			<div id="uploader" class="wu-example">
			    <!--用来存放文件信息-->
			    <div class="btns">
				<div id="picker" style="float: left;">选择文件</div>
				<div style="line-height: 41px;height: 41px;color: #999;" >${restrictedFormat}</div>
			    </div>
			    <div id="thelist" class="uploader-list" >
				    <div id="" class="file-item thumbnail" style="width:120px;float: left;">
				   		// 图片全路径 
						 <img src="${apphomepageApplicationPage.normalcoverallimg}" style="width: 100px;height: 100px;">
					 </div>
			    </div>
			</div>
		 </fieldset>
		<span class="Validform_checktip" id="file"></span>
	</td>
</tr>

2、引入文件css、js:

<link rel="stylesheet" type="text/css" href="src/webuploader.css"></link>
<script type="text/javascript" src="plug-in/src/webuploader.min.js" ></script>
// 项目中还要引入
Uploader.swf文件

3、uploader初始化：

<script type="text/javascript">
	var uploader = null;
	var kl = null;
	/*-------------------------------------------文件上传-----------------------------------------*/
	// 图片上传后台方法路径
	var urlc= '<%=basePath%>/***.do';
	// 跟目录
	var BASE_URL="<%=basePath%>";
	// 上传入口类
	uploader = WebUploader.create({
	    // swf文件路径
	    swf: BASE_URL+'/plug-in/webuploader/Uploader.swf',
	    // 文件接收服务端。
		server: urlc,
		// {Boolean} [可选] [默认值：undefined] 去重， 根据文件名字、文件大小和最后修改时间来生成hash Key
		duplicate: false,
	    // 选择文件的按钮。可选。
	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '#picker',
	    // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
	    resize: false,
	    // {Boolean} 是否开起同时选择多个文件能力
	    multiple:false,
	    // 只允许选择图片文件
	    accept: {
	       // {String} 文字描述
	       title: 'Images',
	       // {String} 允许的文件后缀，不带点，多个用逗号分割，此处由后台配置传入
	       extensions: '${validationInformation}',
	       // {String} 多个用逗号分割
	       mimeTypes: 'image/jpg,image/jpeg,image/png'
	    },
	    // {Object} [可选] 配置生成缩略图的选项
	    thumb: {
	    	// 为空的话则保留原有图片格式。
    		// 否则强制转换成指定的类型
	       type: 'image/jpg,jpeg,png'
	    },
	    //指明参数名称，后台也用这个参数接收文件
	    duplicate: false,
	    // {Boolean} [可选] [默认值：false] 设置为 true 后，不需要手动调用上传，有文件选择即开始上传
	    auto: true,
	    // {int} [可选] [默认值：undefined] 验证单个文件大小是否超出限制, 超出则不允许加入队列，单位为B
	    fileSingleSizeLimit: ${maxsize},
	    // {int} [可选] [默认值：undefined] 验证文件总数量, 超出则不允许加入队列
	    fileNumLimit:100,
	    method: 'POST',
	    // {Object} [可选] [默认值：{}] 文件上传请求的参数表，每次发送都会发送此对象中的参数
	    formData:{"isup":"1","bizType":"homepageicon"}
	 
	});
	// file {File}File对象 当文件被加入队列以后触发
	uploader.on( 'fileQueued', function( file ) {
		$("#thelist").empty();
		 var $list = $("#thelist"), 
		 $li = $( 
		 '<div id="' + file.id + '" class="file-item thumbnail" style="width:120px;float: left;">' + 
		 '<img>' ), 
		 $img = $li.find('img'); 
		 // $list为容器jQuery实例 
		 $list.append( $li ); 
		 // 创建缩略图  
		 // limitwidth、limitheight 来源于后台配置
		 var limitwidth = ${width};
		 var limitheight = ${height};
		 // 验证图片像素是否符合设置规范 根据图片上传情况来使用
		 uploader.makeThumb( file, function( error, src ) { 
			 imgWidth = file._info.width;
	         imgHeight = file._info.height;
	         if(limitwidth!=imgWidth || imgHeight!=limitheight){
	         	$("#file").attr("class","Validform_checktip Validform_wrong");
	         	$("#file").text("文件的像素不符合标准!");
	         	$("#filecheck").val("0");
	         	setTimeout(function() {
	         		$("#"+file.id).remove();
				},1000);
	         }else{
	         	$("#file").attr("class","Validform_checktip Validform_right");
	         	$("#file").text("通过信息验证！");
	         	$("#filecheck").val("1");
	         }
		 if ( error ) { 
		 	$img.replaceWith('<span>不能预览</span>'); 
		 	return; 
		 } 
		 $img.attr( 'src', src ); 
		 }, 100, 100 ); //100x100为缩略图尺寸
	}); 
	
	 // file {File}File对象 
	 // percentage {Number}上传进度
	 // 上传过程中触发，携带上传进度 
	 uploader.on( 'uploadProgress', function( file, percentage ) {
	    var $li = $( '#'+file.id ),
	        $percent = $li.find('.progress .progress-bar');
	    // 避免重复创建
	    if ( !$percent.length ) {
	        $percent = $('<div class="progress progress-striped active">' +
	          '<div class="progress-bar" role="progressbar" style="width: 0%">' +
	          '</div>' +
	        '</div>').appendTo( $li ).find('.progress-bar');
	    }
	    $li.find('div.state').html(file.name+'---上传中');
	    $percent.css( 'width', percentage * 100 + '%' );
	});
	// file {File}File对象
    // response {Object}服务端返回的数据
	// 当文件上传成功时触发，给filecheck赋值为1证明图片已经上传成功，fileurl为图片路径。
	uploader.on( 'uploadSuccess', function(file, response) {
		if(response.success){
			console.log(response);
			$("#fileurl").val(response.obj);
		}else{
			$("#filecheck").val(1);
		};
	});
	// file {File}File对象
	// reason {String}出错的code
	// 当文件上传出错时触发
	uploader.on( 'uploadError', function( file) {
	    $( '#'+file.id ).find('div.state').html(file.name+'---上传出错');
	});
	// file {File} [可选]File对象
	// 不管成功或者失败，文件上传完成时触发
	uploader.on( 'uploadComplete', function( file ) {
	   $( '#'+file.id ).find('.progress').fadeOut('slow');
	}); 
	// 此处为页面整个提交的触发事件 可随情况调用
	function uploadadcer(){
		var filecheck = $("#filecheck").val();
		if(filecheck=="0"){
			$("#file").attr("class","Validform_checktip Validform_wrong");
	        $("#file").text("请选择文件!");
			return false;
		}
	};