悠悠楠杉
网站页面
Layui 多图片上传
12/23
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>多图片上传</title>
<link rel="stylesheet" href="layui/dist/css/layui.css">
<style>
.layui-upload-img{width: 92px; height: 92px; margin: 0 10px 10px 0;}
</style>
</head>
<body>
<form action="2.php" method="post" enctype="multipart/form-data">
<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="emo2"></div>
</blockquote>
</div>
<button type="button" id="file-btn">上传</button>
<button type="submit" id="submit">提交</button>
</form>
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="layui/dist/layui.js"></script>
<!--<script>
//自动上传
layui.use('upload', function() {
var $ = layui.jquery,
upload = layui.upload;
upload.render({
elem: '#test2',
url: '1.php', //改成您自己的上传接口
multiple: true,
before: function(obj) {
//预读本地文件示例，不支持ie8
obj.preview(function(index, file, result) {
files = obj.pushFile();
$(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" style="width:200px;height:auto;">')
$('#remove_' + index).bind('dblclick', function() { //双击删除指定预上传图片
delete files[index]; //删除指定图片
$(this).remove();
})
// console.log(1, index); //得到文件索引
// console.log(2, file.name); //得到文件对象
// console.log(3, result); //得到文件base64编码，比如图片
// $('#demo2').append('<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">')
});
},
done: function(res) {
//上传完毕
console.log(res);
}
});
})
</script>-->
<script>
//非自动上传，需要点上传按钮后才会上传
layui.use('upload', function() {
var $ = layui.jquery,
upload = layui.upload;
upload.render({
elem: '#test2',
url: '1.php',
auto: false //选择文件后不自动上传
,
bindAction: '#file-btn' //指向一个按钮触发上传
,
choose: function(obj) {
//将每次选择的文件追加到文件队列
var files = obj.pushFile();
//预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
obj.preview(function(index, file, result) {
$(".layui-upload-list").append('<img src="' + result + '" id="remove_' + index + '" title="双击删除该图片" style="width:200px;height:auto;">')
$('#remove_' + index).bind('dblclick', function() { //双击删除指定预上传图片
delete files[index]; //删除指定图片
$(this).remove();
})
// console.log(index); //得到文件索引
// console.log(file); //得到文件对象
// console.log(result); //得到文件base64编码，比如图片
//obj.resetFile(index, file, '123.jpg'); //重命名文件名，layui 2.3.0 开始新增
//这里还可以做一些 append 文件列表 DOM 的操作
//obj.upload(index, file); //对上传失败的单个文件重新上传，一般在某个事件中使用
//delete files[index]; //删除列表中对应的文件，一般在某个事件中使用
});
},
done: function(res) {
//上传完毕
console.log(res);
}
});
})
</script>
</body>
</html>
1.php
<?php
header("Access-Control-Allow-Origin: *"); //解决跨域
//生成随机字符串
function randStr($num = 6)
{
$str = str_shuffle('abcedfghjkmnpqrstuvwxyzABCEDFGHJKMNPQRSTUVWXYZ0123456789');
return substr($str, 0, $num);
}
//获取文件后缀
function getExt($filename)
{
return strrchr($filename, '.');
}
$date = date('Y/m/d'); //获取年月日
define('BASE_PATH', str_replace('\\', '/', realpath(dirname(__FILE__) . '/'))/);
$dir = "/upload/" . $date . "/"; //判断是否有对应的文件
$file = '/' . $dir . time() . randStr() . getExt($_FILES["file"]["name"]); //上传文件的名字
$arr = array(
'code' => 0, //返回状态
'msg' => '' //提示消息
);
$dir = BASE_PATH . $dir;
$file = BASE_PATH . $file;
$file_info = $_FILES['file']; //前端传过来的文件
$file_error = $file_info['error'];
if (!is_dir($dir)) { //判断目录是否存在
mkdir($dir, 0777, true); //如果目录不存在则创建目录
}
//判断文件中是否有相同的文件
if (!file_exists($file)) {
if ($file_error == 0) {
if (move_uploaded_file($file_info["tmp_name"], $file)) {
$arr = [
'code' => 1,
'msg' => '上传成功',
'data' => [
'url' => $file
]
];
} else {
$arr['msg'] = "上传失败";
}
} else {
switch ($file_error) {
case 1:
$arr['msg'] = '上传文件超过了PHP配置文件中upload_max_filesize选项的值';
break;
case 2:
$arr['msg'] = '超过了表单max_file_size限制的大小';
break;
case 3:
$arr['msg'] = '文件部分被上传';
break;
case 4:
$arr['msg'] = '没有选择上传文件';
break;
case 6:
$arr['msg'] = '没有找到临时文件';
break;
case 7:
case 8:
$arr['msg'] = '系统错误';
break;
}
}
} else {
$arr['msg'] = "当前目录中，文件" . $file . "已存在";
}
echo json_encode($arr); //将遍历好的数组反给前端
