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