layui-圖片上傳，可使用選擇圖片->上傳圖片，預覽圖片，刪除圖片（轉載）
原文地址：https://gitee.com/AMortal/codes/qt8m6zk30u1g4evr95jhx13
-
<!DOCTYPE html> -
<html> -
<head> -
<meta charset="utf-8"> -
<title>layui</title> -
<meta name="renderer" content="webkit"> -
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> -
<link rel="stylesheet" type="text/css" href="common/layui/css/layui.css" media="all"> -
<style> -
.layui-upload .mark_button { -
position: absolute; -
right: 15px; -
} -
.upload-img { -
position: relative; -
display: inline-block; -
width: 300px; -
height: 200px; -
margin: 0 10px 10px 0; -
transition: box-shadow .25s; -
border-radius: 4px; -
box-shadow: 0px 10px 10px -5px rgba(0, 0, 0, 0.5); -
transition: 0.25s; -
-webkit-transition: 0.25s; -
margin-top: 15px; -
} -
.layui-upload-img { -
width: 300px; -
height: 200px; -
border-radius: 4px; -
} -
.upload-img:hover { -
cursor: pointer; -
box-shadow: 0 0 4px rgba(0,0,0,1); -
transform: scale(1.2); -
-webkit-transform: scale(1.05); -
} -
.upload-img input { -
position: absolute; -
left: 0px; -
top: 0px; -
} -
.upload-img button { -
position: absolute; -
right: 0px; -
top: 0px; -
border-radius: 6px; -
} -
</style> -
<!-- 注意：如果你直接複製所有程式碼到本地，上述css路徑需要改成你本地的 --> -
</head> -
<body> -
<div class="layui-upload "> -
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> -
預覽圖： -
<div class="layui-upload-list" id="imgs"> -
</div> -
</blockquote> -
<div class="mark_button"> -
<button type="button" class="layui-btn layui-btn-normal" id="sele_imgs">選擇檔案</button> -
<button type="button" class="layui-btn" id="upload_imgs" disabled>開始上傳</button> -
<button type="button" class="layui-btn layui-btn-danger" id="dele_imgs">刪除選中圖片</button> -
</div> -
</div> -
<script type="text/javascript" src="common/layui/layui.all.js"></script> -
<script id="img_template" type="text/html"> -
<div class="upload-img" filename="{{ d.index }}"> -
<input type="checkbox" name="" lay-skin="primary"> -
<img src="{{ d.result }}" alt="{{ d.name }}" class="layui-upload-img"> -
</div> -
</script> -
<script> -
layui.use(['upload', 'laytpl', 'form'], function () { -
var $ = layui.jquery -
, upload = layui.upload -
, laytpl = layui.laytpl -
, form = layui.form; -
//批量刪除 單擊事件 -
$('#dele_imgs').click(function () { -
$('input:checked').each(function (index, value) { -
var filename=$(this).parent().attr("filename"); -
delete imgFiles[filename]; -
$(this).parent().remove() -
}); -
}); -
var imgFiles; -
//多圖片上傳 -
var uploadInst = upload.render({ -
elem: '#sele_imgs' //開始 -
, acceptMime: 'image/*' -
, url: '/upload/' -
, auto: false -
, bindAction: '#upload_imgs' -
, multiple: true -
, size: 1024 * 12 -
, choose: function (obj) { //選擇圖片後事件 -
var files = this.files = obj.pushFile(); //將每次選擇的檔案追加到檔案佇列 -
imgFiles = files; -
$('#upload_imgs').prop('disabled',false); -
//預讀本地檔案示例，不支援ie8 -
obj.preview(function (index, file, result) { -
var data = { -
index: index, -
name: file.name, -
result: result -
}; -
//將預覽html 追加 -
laytpl(img_template.innerHTML).render(data, function (html) { -
$('#imgs').append(html); -
}); -
//繫結單擊事件 -
$('#imgs div:last-child>img').click(function () { -
var isChecked = $(this).siblings("input").prop("checked"); -
$(this).siblings("input").prop("checked", !isChecked); -
return false; -
}); -
}); -
} -
, before: function (obj) { //上傳前回函式 -
layer.load(); //上傳loading -
} -
, done: function (res,index,upload) { //上傳完畢後事件 -
layer.closeAll('loading'); //關閉loading -
//上傳完畢 -
$('#imgs').html("");//清空操作 -
top.layer.msg("上傳成功！"); -
return delete imgFiles[index]; //刪除檔案佇列已經上傳成功的檔案 -
} -
, error: function (index, upload) { -
layer.closeAll('loading'); //關閉loading -
top.layer.msg("上傳失敗！"); -
} -
}); -
}); -
</script> -
</body> -
</html>
效果圖
