您的位置：首页 > Web前端 > Node.js

node+layui实现图片上传预览和删除功能

2018-03-20 17:01 1341 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="layui/css/layui.css">
<link rel="stylesheet" href="css/public.css" />
<style>
</style>
</head>
<body>
<div class="layui-upload">
<button type="button" class="layui-btn" id="uploadBtn">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图：
<div class="layui-upload-list" id="previewBox">

</div>
</blockquote>
<button class="layui-btn"  id="save">提交</button>
</div>
</body>
<script src="layui/layui.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
layui.use(['upload','jquery'],function(){
var $ = layui.jquery;
var upload = layui.upload;
var srcArr = new Array();
upload.render({
elem: '#uploadBtn'
,url: '/uploadImgs'
,multiple: true
,bindAction:"#save"
,auto:false
,choose:(obj)=>{//预览图片
var files = obj.pushFile();
obj.preview((index, file, result)=>{
$('#previewBox').append('<div class="imgBox"><em class="remove_'+index+'">删除</em><img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"></div>')
$('.remove_'+index).bind('click',function(){
delete files[index];//删除指定图片
$(this).parent().remove();
})
});
}
,done: (res)=>{
if(res.code===200){
var srcStr = res.data[0];
srcStr = srcStr.replace("public","").substring(1,srcStr.length);
srcArr.push(srcStr);
for(var i in srcArr){
$('#previewBox img').eq(i).attr('src',srcArr[i])
$('#previewBox em').eq(i).remove();
}
}
}
});

})

</script>
</html>

node代码：
用的是express+multer模块var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './public/upload')
},
filename: function (req, file, cb) {
var str = file.originalname.split('.');
cb(null, Date.now()+'.'+str[1]);
}
})
var upload = multer({ storage: storage });
app.post("/uploadImgs",upload.array("file",20),function(req,res,next){

var arr = [];
for(var i in req.files){

arr.push(req.files[i].path);
}
res.json({
code:200,
data:arr
})
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航