https://blog.csdn.net/qq_47750283/article/details/119117293
// 引入上传工具:upload
layui.use('upload', function () {
var upload = layui.upload; // 调用工具
// 执行实例
var uploadInst = upload.render({
elem: "#img1" // 指向容器选择器,与id进行绑定
});
})
https://www.cnblogs.com/anhan/p/15217556.html
你选择这个是批量上传图片的,给你一个简单例子:
<form class="layui-form ok-form" lay-filter="filter">
<div class="layui-form-item">
<label class="layui-form-label">上传照片</label>
<div class="layui-input-inline uploadHeadImage">
<div class="layui-upload-drag" id="uploadpic">
<i class="layui-icon"></i>
<p>点击上传图片,或将图片拖拽到此处</p>
</div>
</div>
预览图:
<div class="layui-upload-list uploader-list" id="uploader-list"></div>
<input type="hidden" id="imgUrls" name="picpath" class="layui-input">
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<input type="hidden" name="action" value="addsave" lay-verify="required">
<button class="layui-btn" lay-submit lay-filter="add">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
<script src="/lib/layui/layui.js"></script>
<script>
layui.use(["element", "form", "laydate", "okLayer", "okUtils",'upload'], function () {
window.form = layui.form;
window.$ = layui.jquery;
let laydate = layui.laydate;
let Layer = layui.Layer;
let okUtils = layui.Utils;
let upload = layui.upload;
okLoading.close();
var s = "";//保存图片地址
var upload_num=5;
//拖拽上传
var uploadInst = upload.render({
elem: '#uploadpic'
,url: '/api/ajax_upload.php' //改成您自己的上传接口
,acceptMime: 'image/*' //普通文件
,exts: 'jpg|png|gif|bmp|jpeg' //只允许上传压缩文件
, size: 1000
, multiple: true
, number: upload_num
, before: function (obj) {
this.data={'picpath':'koubei'};
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
var oldsttr=$("#imgUrls").val();
var choose_length=Object.keys(obj.pushFile()).length;
var img_arr=[];
if(oldsttr!=''){
img_arr=oldsttr.split(",");
}
if(img_arr.length+choose_length>upload_num){
layer.msg('最多上传'+upload_num+'张图片', {icon: 5});
var UPLOAD_FILES = obj.pushFile();
for(var x in UPLOAD_FILES){
delete UPLOAD_FILES[x];
}
return false;
}
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result) {
if(file.size >0.3*1024*1024){ //判断上传每个图片大小
layer.msg('文件大小不得超过0.3M', {icon: 5}); //layui弹出层,icon:5,时,是一个嘴角向下的脸
var UPLOAD_FILES = obj.pushFile();
for(var x in UPLOAD_FILES){
delete UPLOAD_FILES[x];
}
return false;
}
});
}
, done: function (res,index) {
delete this.files[index]//移除队列中文件 ---这很重要防止之前的图片重复上传
if(res.code==0){
if (s == "") {
s = JSON.stringify(res.imgsrc);
} else {
s = s + "," + JSON.stringify(res.imgsrc);
};
$('#uploader-list').append('<div id="" class="file-iteme"><div class="handle"><i class="layui-icon layui-icon-delete"></i></div><img style="width: 100px;height: 100px;" src='+ res.imgsrc +'></div>')
$("#imgUrls").val(s);
}
return layer.msg(res.msg);
}
, error: function () {
}
});
</script>
参考:https://www.layuiweb.com/doc/modules/upload.html#use
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>upload模块快速使用</title>
<link rel="stylesheet" href="/static/build/layui.css" media="all">
</head>
<body>
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon"></i>上传图片
</button>
<script src="/static/build/layui.js"></script>
<script>
layui.use('upload', function(){
var upload = layui.upload;
//执行实例
var uploadInst = upload.render({
elem: '#test1' //绑定元素
,url: '/upload/' //上传接口
,done: function(res){
//上传完毕回调
}
,error: function(){
//请求异常回调
}
});
});
</script>
</body>
</html>