上傳元件使用開源專案:zyupload
zyupload
// 初始化外掛程式
$("#zyupload").zyUpload({
width: "650px", // 寬度
height: "400px", // 寬度
itemWidth: "140px", // 文件項的寬度
itemHeight: "115px", // 文件項的高度
url: "api/upload", // 上傳檔的路徑
fileType: ["jpg", "png", "txt", "js", "exe"],// 上傳文件的類型
fileSize: 51200000, // 上傳文件的大小
multiple: true, // 是否可以多個檔上傳
dragDrop: true, // 是否可以拖動上傳檔
tailor: true, // 是否可以裁剪圖片
del: true, // 是否可以刪除檔
finishDel: false, // 是否在上傳檔完成後刪除預覽
/* 外部獲得的回檔介面 */
onSelect: function (selectFiles, allFiles) { // 選擇檔的回檔方法 selectFile:當前選中的文件 allFiles:還沒上傳的全部檔
console.info("當前選擇了以下檔:");
console.info(selectFiles);
},
onDelete: function (file, files) { // 刪除一個檔的回檔方法 file:當前刪除的檔 files:刪除之後的檔
console.info("當前刪除了此檔:");
console.info(file.name);
},
onSuccess: function (file, response) { // 檔上傳成功的回檔方法
console.info("此檔上傳成功:");
console.info(file.name);
console.info("此檔上傳到伺服器地址:");
console.info(response);
$("#uploadInf").append("上傳成功,檔地址是:" + response + "
");
},
onFailure: function (file, response) { // 檔上傳失敗的回檔方法
console.info("此檔上傳失敗:");
console.info(file.name);
},
onComplete: function (response) { // 上傳完成的回檔方法
console.info("檔上傳完成");
console.info(response);
}
});