webuploader 上传、回显、预览、删除

因为 webuploader 不支持已上传文件回显，尤其是文件上传成功之后，旋转、删除功能，原有代码是隐藏的。修改这些功能花费了不少时间、特此记录下。以下只展示关键代码，完整代码在 github 上 upload.js

html 部分

<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/";
%>
<script type="text/javascript">
var path="<%=path%>";
//下载已经上传到服务器的文件
function downloadServerFile(id){
	window.location.href=path+"/AssessmentAction/downloadFile?id="+id;
}
</script>
<link rel="stylesheet" type="text/css" href="<%=path%>/resources/lib/webuploader/0.1.5/webuploader.css">
<link rel="stylesheet" type="text/css" href="<%=path%>/resources/lib/webuploader/0.1.5/css/style.css">
<script type="text/javascript" src="<%=path%>/resources/lib/webuploader/0.1.5/webuploader.js"></script>
<script type="text/javascript" src="<%=path%>/resources/lib/webuploader/js/upload.js"></script>
<div id="uploader">
	<div class="queueList">
		<div id="dndArea" class="placeholder">
			<div id="filePicker"></div>
			<p>或将附件拖到这里，单次最多可选10个</p>
		</div>
	</div>
	<div class="statusBar" style="display:none;">
		<div class="progress">
			<span class="text">0%</span>
			<span class="percentage"></span>
		</div><div class="info"></div>
		<div class="btns">
			<div id="filePicker2"></div><div class="uploadBtn">开始上传</div>
		</div>
	</div>
</div>

upload.js

文件上传之后，把原有的旋转、删除功能释放出来。删除本地文件时，同时删除服务器上的文件。

uploader.on( 'uploadSuccess', function( file,response ) {
	//服务端文件ID
	var fileId=response.id;
	
	var $li_suc = $("#"+file.id),
	$btns_suc = $('<div class="file-panel">' +
		'<span class="cancel">删除</span>' +
		'<span class="rotateRight">向右旋转</span>' +
		'<span class="rotateLeft">向左旋转</span></div>').appendTo($li_suc);
	$li_suc.on( 'mouseenter', function() {
		$btns_suc.stop().animate({height: 30});
	});

	$li_suc.on( 'mouseleave', function() {
		$btns_suc.stop().animate({height: 0});
	});
	$btns_suc.on( 'click', 'span', function() {
		var index = $(this).index(),
			deg;

		switch ( index ) {
			case 0:
				layer.confirm('确认要删除吗？',function(index){
					$.ajax({
						type: "get",
						url: path+"/AssessmentAction/deleteFile",
						data: {"id":fileId},
						dataType: "json",
						success: function(data){
							if(data.result){
								uploader.removeFile( file );
								layer.msg('删除成功!',{icon:1,time:1000});
							}else{
								layer.msg('删除失败!',{icon:1,time:1000});
							}
							layer.close(index);
						}
				   });
				});
				return;

			case 1:
				file.rotation += 90;
				break;

			case 2:
				file.rotation -= 90;
				break;
		}

		if ( supportTransition ) {
			deg = 'rotate(' + file.rotation + 'deg)';
			$li_suc.find(".imgWrap").css({
				'-webkit-transform': deg,
				'-mos-transform': deg,
				'-o-transform': deg,
				'transform': deg
			});
		} else {
			$li_suc.find(".imgWrap").css( 'filter', 'progid:DXImageTransform.Microsoft.BasicImage(rotation='+ (~~((file.rotation/90)%4 + 4)%4) +')');
		}
	});
});

初始化已上传到服务端的文件，并回显、预览

var getFileBlob = function (url, cb) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "blob";
  xhr.addEventListener('load', function() {
	  cb(xhr.response);
  });
  xhr.send();
};	

var blobToFile = function (blob, fileObj) {
  blob.lastModifiedDate = new Date();
  blob.name = fileObj.name;
  blob.size = fileObj.size;
  blob.id = fileObj.id;
  blob.ext = fileObj.ext;
  return blob;
};

var getFileObject = function(fileObj, cb) {
  getFileBlob(fileObj.url, function (blob) {
	  cb(blobToFile(blob, fileObj));
  });
};
//图片回显实现end

//初始化已经上传到服务器上的文件
function initFileList(){
    //从服务端请求已上传文件列表，$businessId为文件关联的业务逻辑ID
	$.ajax({
		 type: "post",
		 url: path+"/AssessmentAction/getFiles",
		 data: {"businessId":$businessId},
		 dataType: "json",
		 success: function(data){
			 console.log(JSON.stringify(data));
			 if(data&&data.length>0){
				 $.each(data,function(index,obj){
					 var obj = {
						  id: obj.id,
						  name : obj.fileName,
						  size:obj.size,
						  lastModifiedDate:"",
						  ext:obj.ext,
						  url:path+obj.filePath
						};
					 //创建文件对象
					 getFileObject(obj, function (fileObject) {
						var wuFile = new WebUploader.Lib.File(WebUploader.guid('rt_'),fileObject);
						var file = new WebUploader.File(wuFile);
						//因为File中有自己的id生成策略，需要覆盖
						file.id=obj.id;
						file.isServer=true;
						file.setStatus("complete");
						uploader.addFiles(file);
					 })
				 });
			 }
		  }
	 });
}
initFileList();

回显参照：

首先向图片转成File类型，然后通过addFiles把图片添加到队列。

//初始化
var uploader = WebUploader.Uploader({...});

var getFileBlob = function (url, cb) {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", url);
  xhr.responseType = "blob";
  xhr.addEventListener('load', function() {
  cb(xhr.response);
  });
  xhr.send();
};

var blobToFile = function (blob, name) {
  blob.lastModifiedDate = new Date();
  blob.name = name;
  return blob;
};

var getFileObject = function(filePathOrUrl, cb) {
  getFileBlob(filePathOrUrl, function (blob) {
  cb(blobToFile(blob, 'test.jpg'));
  });
};

//需要编辑的图片列表
var picList = ['图片url','图片url','图片url','图片url' ]
$.each(picList, function(index,item){
  getFileObject(item, function (fileObject) {
    var wuFile = new WebUploader.Lib.File(WebUploader.guid('rt_'),fileObject);
    var file = new WebUploader.File(wuFile);
    uploader.addFiles(file)
  })
});