這篇文章就簡單的介紹一個很好用的文件上傳工具，批量帶預覽功能。直接貼代碼吧，都有注釋，很好理解。

HTML頁面

pageEncoding="UTF-8"%>

新增照片

var BASE = "${BASE}";

$(function(){

var boxId = $("#boxId").val();

// 初始化插件

$("#zyupload").zyUpload({

width : "650px", // 寬度

height : "400px", // 寬度

itemWidth : "140px", // 文件項的寬度

itemHeight : "115px", // 文件項的高度

url : BASE+"/photo/add/"+boxId, // 上傳文件的路徑

fileType : ["jpg","png","txt","js","exe","gif"],// 上傳文件的類型

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);

}

});

});

總結

以上是生活随笔為你收集整理的java批量上传图片_JAVA图片批量上传JS-带预览功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。