版权声明：俗世凡人行(释) QQ:748507607 https://blog.csdn.net/weixin_41887155/article/details/89352295
效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多图片上传表单</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" href="../layui/css/layui.css" media="all">
<style type="text/css">
.layui-upload-img{
width: 50px;
height: 50px;
}
</style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
<legend>上传多张图片</legend>
</fieldset>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test2">多图片上传</button>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图：
<div class="layui-upload-list" id="demo2"></div>
</blockquote>
</div>
<script src="../layui/layui.js" charset="utf-8"></script>
<script>
layui.use('upload', function(){
var $ = layui.jquery,
upload = layui.upload;
//多图片上传
upload.render({
elem: '#test2',
url: 'upload.php',
multiple: true,
before: function(obj){
obj.preview(function(index, file, result){
$('#demo2').append('<img src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img">')
});
},
done: function(res){
// alert(res);
}
});
});
</script>
</body>
</html>
<?php
//接收控制器
$file = $_FILES['file'];
$tmpname = $file['tmp_name']; //文件临时存储路径名
$filename = $file['name']; //文件名
$fileurl = "./"; //移动到路径
if(is_uploaded_file($tmpname)){ //临时文件存在
$mvd = move_uploaded_file($tmpname,$fileurl.$filename); //移动到自定义的位置
if(!$mvd){
echo 0;
}else
{
echo 1;
}
}
