1000字范文,内容丰富有趣,学习的好帮手!
1000字范文 > java批量上传图片_JAVA图片批量上传JS-带预览功能

java批量上传图片_JAVA图片批量上传JS-带预览功能

时间:2024-03-04 00:02:36

相关推荐

java批量上传图片_JAVA图片批量上传JS-带预览功能

这篇文章就简单的介绍一个很好用的文件上传工具,批量带预览功能。直接贴代码吧,都有注释,很好理解。

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

}

});

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。