webupload 上传

1. css 文件

 
.btn-file {
  position: relative;
  overflow: hidden;
  vertical-align: middle;
}
.btn-file > input {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 23px;
  cursor: pointer;
  filter: alpha(opacity=0);
  opacity: 0;

  direction: ltr;
}
.webupload {
  display: inline-block;
  margin-bottom: 9px;
}
.webupload .form-control {
  display: inline-block;
  padding-top: 7px;
  padding-bottom: 5px;
  margin-bottom: 0;
  vertical-align: middle;
  cursor: text;
}
.webupload .thumbnail {
  display: inline-block;
  margin-bottom: 5px;
  overflow: hidden;
  text-align: center;
  vertical-align: middle;
}
.webupload .thumbnail > img {
  max-height: 100%;
}
.webupload .btn {
  vertical-align: middle;
}
.webupload-exists .webupload-new,
.webupload-new .webupload-exists {
  display: none;
}
.webupload-inline .webupload-controls {
  display: inline;
}
.webupload-filename {
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
}
.form-control .webupload-filename {
  vertical-align: bottom;
}
.webupload.input-group {
  display: table;
}
.webupload.input-group > * {
  position: relative;
  z-index: 2;
}
.webupload.input-group > .btn-file {
  z-index: 1;
}
.webupload-new.input-group .btn-file,
.webupload-new .input-group .btn-file {
  border-radius: 0 4px 4px 0;
}
.webupload-new.input-group .btn-file.btn-xs,
.webupload-new .input-group .btn-file.btn-xs,
.webupload-new.input-group .btn-file.btn-sm,
.webupload-new .input-group .btn-file.btn-sm {
  border-radius: 0 3px 3px 0;
}
.webupload-new.input-group .btn-file.btn-lg,
.webupload-new .input-group .btn-file.btn-lg {
  border-radius: 0 6px 6px 0;
}
.form-group.has-warning .webupload .webupload-preview {
  color: #8a6d3b;
}
.form-group.has-warning .webupload .thumbnail {
  border-color: #faebcc;
}
.form-group.has-error .webupload .webupload-preview {
  color: #a94442;
}
.form-group.has-error .webupload .thumbnail {
  border-color: #ebccd1;
}
.form-group.has-success .webupload .webupload-preview {
  color: #3c763d;
}
.form-group.has-success .webupload .thumbnail {
  border-color: #d6e9c6;
}
.input-group-addon:not(:first-child) {
  border-left: 0;
}
.webupload .webuploader-pick {
	overflow: inherit;
	padding: 0;
	background: none;
}

2. html

<div class="row">
			<div class="form-group">
				<div id="test1" class="webupload webupload-new" data-provides="webupload">
					<div class="webupload-new thumbnail webupload-default">
						<img th:src="@{${appConf.getStaticPath()} + '/static/images/no_img.png'}" alt="" />
					</div>
					<div class="webupload-preview webupload-exists thumbnail"></div>
					<div>
						<span class="btn green btn-file">
							<span class="webupload-new file-upload"> 选择身份证 </span>
							<span class="webupload-exists" data-select="webupload"> 重选 </span>
						</span>
						<a href="javascript:;" class="btn red webupload-exists" data-dismiss="webupload"> 删除 </a>
					</div>
				</div>
			</div>
		</div>
		
		<div class="row">
			<div class="form-group">
				<div id="test2" class="webupload webupload-new" data-provides="webupload">
					<div class="webupload-new thumbnail webupload-default">
						<img th:src="@{${appConf.getStaticPath()} + '/static/images/no_img.png'}" alt="" />
					</div>
					<div class="webupload-preview webupload-exists thumbnail"></div>
					<div>
						<span class="btn green btn-file">
							<span class="webupload-new file-upload"> 选择身份证 </span>
							<span class="webupload-exists" data-select="webupload"> 重选 </span>
						</span>
						<a href="javascript:;" class="btn red webupload-exists" data-dismiss="webupload"> 删除 </a>
					</div>
				</div>
			</div>
		</div>

3. js

引入webupload js库

<script tsrc="/plugins/webuploader-0.1.5/webuploader.js" type="text/javascript"></script>

+function($) {
	"use strict";
	
	var WebUpload = function (element, options) {
		
		this.$element = $(element);
		
		this.$default = this.$element.find('.webupload-default');
		this.$preview = this.$element.find('.webupload-preview');
		var height = this.$preview.css('height');
		if (this.$preview.css('display') !== 'inline' && height !== '0px' && height !== 'none') {
			this.$preview.css('line-height', height);
		}
		    
		this.original = {
			exists: this.$element.hasClass('webupload-exists'),
			preview: this.$preview.html(),
		}
		
		this.listen();
	};
	  
	WebUpload.prototype.listen = function() {
		
		// 添加重置监听
//		$(this.$input[0].form).on('reset.bs.webupload', $.proxy(this.reset, this));
		
		this.$element.find('[data-trigger="webupload"]').on('click.bs.webupload', $.proxy(this.trigger, this));
		// 添加清空监听
		this.$element.find('[data-dismiss="webupload"]').on('click.bs.webupload', $.proxy(this.clear, this));
		// 添加重选监听
		this.$element.find('[data-select="webupload"]').on('click.bs.webupload', function(e) {
			$(this).closest('[data-provides="webupload"]').find(':file').click();
		});
	};
	
	WebUpload.prototype.clear = function(e) {
		
		if (e) e.preventDefault();
	    
	    this.$preview.html('');
	    this.$element.find('.webupload-filename').text('');
	    this.$element.addClass('webupload-new').removeClass('webupload-exists');
	    
//	    var files = this.upload.getFiles();
//	    for (var f = 0; f < files.length; f++) {
//	    	this.upload.removeFile(files[f], true);
//		}
	    this.upload.reset();
	    
	    if (e !== undefined) {
	    	this.$element.trigger('clear.bs.webupload');
	    }
	};
	
	WebUpload.prototype.reset = function() {
		
		this.clear();

	    this.$preview.html(this.original.preview);
	    this.$element.find('.webupload-filename').text('');
	    this.upload.reset();

	    if (this.original.exists) 
	    	this.$element.addClass('webupload-exists').removeClass('webupload-new');
	    else 
	    	this.$element.addClass('webupload-new').removeClass('webupload-exists');

	}
	
	WebUpload.prototype.getImage = function() {
		return this.result;
	}
	
	WebUpload.prototype.trigger = function(e) {
		
		this.$input.trigger('click')
	    e.preventDefault()
	}
	
	/**
	 * 初始化上传组件
	 * @param options
	 */
	function init(options, $data) {
		
		var uploader = WebUploader.create(options);
		
		$data.upload = uploader;
		
		/**
		 * 添加文件
		 */
		uploader.on('fileQueued', function(file) {
			
			// 判断是否显示图片
			if ($data.$preview.length > 0) {
				
				var preview = $data.$preview;
				var element = $data.$element;
				// 设置缩略图大小
				var width = $data.$default.width() || 200, height = $data.$default.height() || 150;
				
			    // 创建缩略图,如果为非图片文件，可以不用调用此方法。 thumbnailWidth x thumbnailHeight 为 100 x 100
			    uploader.makeThumb(file, function(error, src) {
			    	if (error) {
	    				return;
	    			}
			    	
			    	// 显示图片
					var $img = $('<img>');
					$img[0].src = src;
					
					// if parent has max-height, using `(max-)height: 100%` on child doesn't take padding and border into account
					if (preview.css('max-height') != 'none') $img.css('max-height', parseInt(preview.css('max-height'), 10) - parseInt(preview.css('padding-top'), 10) - parseInt(preview.css('padding-bottom'), 10)  - parseInt(preview.css('border-top'), 10) - parseInt(preview.css('border-bottom'), 10))
					preview.html($img)
					$data.$element.find('.webupload-filename').text(file.name);
					$data.$element.addClass('webupload-exists').removeClass('webupload-new');
			    }, width, height);
			} else {
				// 显示文件名
				$data.$preview.text(file.name);
				$data.$element.trigger('change.bs.webupload');
				$data.$element.find('.webupload-filename').text(file.name);
				$data.$element.addClass('webupload-exists').removeClass('webupload-new');
			}
			
		});
		
		/**
		 * 上传成功
		 */
		uploader.on('uploadSuccess', function(file, response) {
			
			if (response.ret == 0) {
				$data.result = response.data.zvs || [];
			} else {
				OssUtil.bootboxAlert({message : '上传失败：' + response.msg});
			}
		});
		
		uploader.on('uploadError', function (file, response) {
			
			OssUtil.bootboxAlert({message : '上传失败！'});
		});
		
	}
	
	$.fn.webupload = function (options) {
		
		// 判断是方法还是初始化
		if (typeof options == 'string') {
			if ($.fn.webupload.methods[options]) {
				return $.fn.webupload.methods[options](this);
			}
		}
		
		options = options || {};
		
		return this.each(function () {
			
			var $this = $(this),
				data = $this.data('bs.webupload');
	      
			if (!data) {
				$this.data('bs.webupload', (data = new WebUpload(this, options)));
				init($.extend({}, $.fn.webupload.defaults, options), data);
			}
			if (typeof options == 'string') 
				data[options]();
		});
	};
	
	$.fn.webupload.Constructor = WebUpload;
	
	/**
	 * 默认参数
	 */
	$.fn.webupload.defaults = {
		pick : {
			id : '.file-upload',
			// 默认单选
			multiple : false,
		},
		// 选择文件后默认上传
		auto : true,
		swf : '/assets/global/plugins/webuploader-0.1.5/Uploader.swf',
		// url
		server : OSS.APISERVER.COMM + '/rest/images/attachments/json/0/0/0/0/-1/' + OssUtil.getApiToken() + '/-1/-1',
		// 上传文件类型
		accept : {
			title : 'Images',
			extensions : 'gif,jpg,jpeg,bmp,png',
			mimeTypes : 'image/jpg,image/jpeg,image/png'
		},
		// 禁掉全局的拖拽功能。这样不会出现图片拖进页面的时候，把图片打开
		disableGlobalDnd : true,
	};
	
	/**
	 * 默认方法
	 */
	$.fn.webupload.methods = {
		
		getImage : function(jq) {
			
			var $this = $(jq[0]),
				data = $this.data('bs.webupload');
			return data.result;
		}
	};
	
	$(function() {
		// 初始化组件
		$('[data-provides="webupload"]').each(function() {
			
			var $this = $(this);
			var data = $this.data();
			data.pick = data.pick || {};
			data.pick.id = $this.find('.file-upload');
			
		    $this.webupload($this.data());
		});
	});
	
}(window.jQuery);

4.效果图