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();

回顯參照：https://blog.csdn.net/WuLex/article/details/99897625