一款簡單實用的上傳檔案圖片外掛程式並且相容移動端zyupload.js

標籤：width   並且   file   jpg   失敗   logs   view   ext   func   

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: "/System/[email protected]", // 上傳檔案的路徑 本人用的是MVC路由
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