上傳元件使用開源專案: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); } });