在做圖片上傳時發現一個蠻好用的控制元件，支援多張圖片同時上傳，可以點選選擇圖片，也可以將圖片拖拽到上傳框直接上傳，方便，好用，介面也簡單，基本可以直接放到專案裡使用。

先看看他的樣式：

選擇圖片後：

$(function(){
	// 初始化外掛
	$("#demo").zyUpload({
		width            :   "650px",                 // 寬度
		height           :   "400px",                 // 寬度
		itemWidth        :   "120px",                 // 檔案項的寬度
		itemHeight       :   "100px",                 // 檔案項的高度
		url              :   "/upload/UploadAction",  // 上傳檔案的路徑
		multiple         :   true,                    // 是否可以多個檔案上傳
		dragDrop         :   true,                    // 是否可以拖動上傳檔案
		del              :   true,                    // 是否可以刪除檔案
		finishDel        :   false,  				  // 是否在上傳檔案完成後刪除預覽
		/* 外部獲得的回撥介面 */
		onSelect: function(files, allFiles){                    // 選擇檔案的回撥方法
			console.info("當前選擇了以下檔案：");
			console.info(files);
			console.info("之前沒上傳的檔案：");
			console.info(allFiles);
		},
		onDelete: function(file, surplusFiles){                     // 刪除一個檔案的回撥方法
			console.info("當前刪除了此檔案：");
			console.info(file);
			console.info("當前剩餘的檔案：");
			console.info(surplusFiles);
		},
		onSuccess: function(file){                    // 檔案上傳成功的回撥方法
			console.info("此檔案上傳成功：");
			console.info(file);
		},
		onFailure: function(file){                    // 檔案上傳失敗的回撥方法
			console.info("此檔案上傳失敗：");
			console.info(file);
		},
		onComplete: function(responseInfo){           // 上傳完成的回撥方法
			console.info("檔案上傳完成");
			console.info(responseInfo);
		}
	});
});
 

參考：http://blog.csdn.net/weixin_36380516/article/details/69898336

這個控制元件大體就是這樣，如果有需要的可以下載（0積分）：http://download.csdn.net/detail/weixin_36380516/9820594