|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>zyupload上传实例</title>
|
|
|
<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
|
|
|
<link rel="stylesheet" href="../lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
|
|
|
<link rel="stylesheet" href="../css/public.css" media="all">
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="layuimini-container">
|
|
|
<div class="layuimini-main">
|
|
|
<blockquote class="layui-elem-quote">
|
|
|
上传组件使用开源项目：zyupload<br>
|
|
|
<a href="http://www.jq22.com/jquery-info14213" target="_blank" class="layui-btn layui-btn-danger">zyupload</a>
|
|
|
</blockquote>
|
|
|
<div id="zyupload" class="zyupload"></div>
|
|
|
<pre class="layui-code">
|
|
|
// 初始化插件
|
|
|
$("#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("<p>上传成功，文件地址是：" + response + "</p>");
|
|
|
},
|
|
|
onFailure: function (file, response) { // 文件上传失败的回调方法
|
|
|
console.info("此文件上传失败：");
|
|
|
console.info(file.name);
|
|
|
},
|
|
|
onComplete: function (response) { // 上传完成的回调方法
|
|
|
console.info("文件上传完成");
|
|
|
console.info(response);
|
|
|
}
|
|
|
});
|
|
|
</pre>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
|
|
|
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
|
|
<script src="../lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
|
|
|
<script type="text/javascript">
|
|
|
$(function () {
|
|
|
// 初始化插件
|
|
|
$("#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("<p>上传成功，文件地址是：" + response + "</p>");
|
|
|
},
|
|
|
onFailure: function (file, response) { // 文件上传失败的回调方法
|
|
|
console.info("此文件上传失败：");
|
|
|
console.info(file.name);
|
|
|
},
|
|
|
onComplete: function (response) { // 上传完成的回调方法
|
|
|
console.info("文件上传完成");
|
|
|
console.info(response);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |