《代码回顾 壹》（WebUploader开发记录）

这些内容都是我自己整理的一些小的初级知识，只是为了以后能回顾一下，觉得很差 请勿喷 ，也希望可以帮助到一些刚接触这个插件的人

引入步骤：

步骤1. 下载webUploader 链接 http://fex.baidu.com/webuploader/download.html

步骤2. 下载的文件包内整理需要的文件大概重要的有

这几个文件.

WebUploader.js 文件用来初始化一些ajax对象(具体做了那些事情可以去里面看注释)

WebUploader.css 是用来给上传按钮做一些美化样式

Uploader.swf 文件会在初始化的时候指定，所以其文件路径必须放在跟上面文件同路径，不然就要在上传的JS中自己指定这个文件的路径以确保其可以正常访初始化。

引入两个文件

<!-- 引入webupload css样式文件 -->
	<link style="text/css" rel="stylesheet"  href="<%=basePath%>plugins/webuploader/webuploader.css">
<!-- 引入webupload JS文件 -->
	<script type="text/javascript" src="<%=basePath%>plugins/webuploader/webuploader.js"></script>

然后在代码中，图片上传的位置放入此容器，包含图片上传按钮以及图片的展示

<!-- 图片上传(百度插件) -->
<div id="uploader-demo2">
<!--用来存放item-->
<div id="filePicker2" style="float: left;" class="uploader-list fileList webuploader-container">选择图片</div>
</div>
<div id='zmy' align="left">
<img src="${pageContext.request.contextPath}/${var.ABOUT_IMAGE}" class="center-block" width="70" height="70" οnerrοr="this.src='<%=basePath%>static/images/nopicture.jpg';" alt="pic" />
<!-- 选择图片  上传活动 --> 
</div> 
<input type="hidden" name="ABOUT_IMAGE" id="ABOUT_IMAGE" value="${var.ABOUT_IMAGE}" />

这里要说下这个隐藏的Input的作用,因为webUploader是异步上传的插件，所以在文件上传到服务器里面后，后返回一个文件路径+文件名的字符串回来，这个路径是要记录下来，然后存储到数据库里面的。具体的赋值方法在

这里可以看到，这个JS文件是异步上传文件。在引入了上面的两个文件后，这个文件在WebUploader.js后面引入。还有一点要注意的是，这个隐藏的Input标。不要在放在他上面的DIV标签内部。因为上传后会把这个DIV覆盖掉。

这个属性标注的ID 会被创建成上传按钮。

SWF文件的路径，可以在这个JS文件中去指定。
文件接受服务端，就是我请求的控制器路径。

这一步就会把我刚才说的那个DIV的内容清空然后重新追加一个DIV。

文件上传失败后，在此步会显示出错误提示。

WebUploader是支持上传图片预览的 我们在异步请求的JS中配置预览图的大小

WebUploader 有很多很多功能等着我们去了解去发现，图片可以预览，可以压缩，兼容大部分的浏览器，设值图片上传大小 等等....
其实最重要的就是他把组件区分的很开，我们拓展的时候很方便。

我把最重要的上传文件配置的代码贴一下

/***
 * 	2018-4-12	

 * 	Mr.Li
 * */
$(function() {
		// 初始化Web Uploader
	var uploader = WebUploader.create({
	    // 选完文件后，是否自动上传。
	    auto: true,
	    // swf文件路径
	    swf: 'js/upload.js',

	    // 文件接收服务端。
	    server: 'about/upload.do',
	    // 选择文件的按钮。可选.
	    // 内部根据当前运行是创建，可能是input元素，也可能是flash.
	    pick: '#filePicker',
	    // 只允许选择图片文件。
	    accept: {
	        title: 'Images',
	        extensions: 'gif,jpg,jpeg,bmp,png',
	        mimeTypes: 'image/*'
	    }
	});
	// 当有文件添加进来的时候
	uploader.on( 'fileQueued', function( file ) {
		$list = $("#zjt");
		$list.empty();
	    var $li = $(
	            '<div id="' + file.id + '" class="file-item thumbnail"  >' +
	                '<img>' +
	                '<div class="info"  style="display: none;" >' + file.name + '</div>' +
	            '</div>'
	            ),
	        $img = $li.find('img');


	    // $list为容器jQuery实例
	    $list.append( $li );

	    // 创建缩略图
	    // 如果为非图片文件，可以不用调用此方法。
	    // thumbnailWidth x thumbnailHeight 为 100 x 100
	    var thumbnailWidth = 320;
	    var thumbnailHeight = 160;
	    uploader.makeThumb( file, function( error, src ) {
	        if ( error ) {
	            $img.replaceWith('<span>不能预览</span>');
	            return;
	        }

	        $img.attr( 'src', src );
	    }, thumbnailWidth, thumbnailHeight );
	});
	// 文件上传过程中创建进度条实时显示。
	uploader.on( 'uploadProgress', function( file, percentage ) {
	    var $li = $( '#'+file.id ),
	        $percent = $li.find('.progress span');

	    // 避免重复创建
	    if ( !$percent.length ) {
	        $percent = $('<p class="progress"><span></span></p>')
	                .appendTo( $li )
	                .find('span');
	    }

	    $percent.css('width', percentage * 100 + '%' );
	});

	// 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on( 'uploadSuccess', function( file ) {
	    $( '#'+file.id ).addClass('upload-state-done');
	});

	// 文件上传失败，显示上传出错。
	uploader.on( 'uploadError', function( file ) {
	    var $li = $( '#'+file.id ),
	        $error = $li.find('div.error');

	    // 避免重复创建
	    if ( !$error.length ) {
	        $error = $('<div class="error"></div>').appendTo( $li );
	    }

	    $error.text('上传失败');
	});

	uploader.on('uploadSuccess',function(file,json){
		$("#ABOUT_LOGO").val(json._raw);
	});
	
	// 完成上传完了，成功或者失败，先删除进度条。
	uploader.on( 'uploadComplete', function( file ) {
	    $( '#'+file.id ).find('.progress').remove();
	});
	
});