一款簡單實用的上傳文件圖片插件並且兼容移動端zyupload.js
1.下載zyupload插件包 包含的文件如下圖：
2.在/images/fileType文件夾下定義上傳文件的顯示圖標 如下圖所示：
3.打開zyupload.js，修改上傳後顯示文件圖標路徑 如下圖所示：
4.調用的JS代碼
<link rel="stylesheet" href="~/Content/assets/css/zyupload-1.0.0.min.css">
<script type="text/javascript" src="~/Content/assets/js/zyupload.1.0.0.min.js"></script>
<div id="zyupload_image" class="zyupload"></div>
<script type="text/javascript">
$(function () {
// 初始化插件
$("#zyupload_image").zyUpload({
width: "90%", // 寬度
height: "auto", // 高度
itemWidth: "135px", // 文件項的寬度
itemHeight: "115px", // 文件項的高度
url: "[email protected]
fileType: ["jpg", "png", "gif", "JPG", "PNG", "GIF"],// 上傳文件的類型
fileSize: 512000, // 上傳文件的大小
multiple: true, // 是否可以多個文件上傳
dragDrop: false, // 是否可以拖動上傳文件
tailor: false, // 是否可以裁剪圖片
del: true, // 是否可以刪除文件
finishDel: false, // 是否在上傳文件完成後刪除預覽
/* 外部獲得的回調接口 */
onSelect: function (selectFiles, allFiles) { // 選擇文件的回調方法 selectFile:當前選中的文件 allFiles:還沒上傳的全部文件
},
onDelete: function (file, files) { // 刪除一個文件的回調方法 file:當前刪除的文件 files:刪除之後的文件
},
onSuccess: function (file, response) { // 文件上傳成功的回調方法
},
onFailure: function (file, response) { // 文件上傳失敗的回調方法
Alert(‘網絡繁忙，請稍後再試！‘, ‘提示‘);
},
onComplete: function (response) { // 上傳完成的回調方法
//console.info("文件上傳完成");
//Alert(‘文件上傳完成‘, ‘提示‘);
window.location.href = window.location.href;
}
});
});
5.後臺處理業務邏輯
一款簡單實用的上傳文件圖片插件並且兼容移動端zyupload.js