图片/文件上传 - layui.upload
普通上传文件是借助 type="file" 的 input 标签来完成的, 这太low了
本文是利用 layui 做 两种情况下的图片上传 服务器端是ThinkPHP3.2
实例一: (点击上传即保存数据库)
upload.html
<!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" href="/Public/layui/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-upload">
<button type="button" class="layui-btn" id="test1">上传图片</button>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1" width="150px">
</div>
</div>
<script src="/Public/layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#test1'
,url: '{:U("Api/index/upload")}'
,before: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,done: function(res){
//上传成功
return layer.msg(res.msg,{icon: res.status,time: 2000});
}
});
});
</script>
</body>
</html>
upload()方法
public function upload()
{
if(IS_AJAX){
$upload = new \Think\Upload();// 实例化上传类
$upload->maxSize = 1024*1024 ;// 设置附件上传大小
$upload->exts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
$upload->rootPath = './Public/'; // 设置附件上传根目录
$upload->savePath = 'img/'; // 设置附件上传(子)目录
$info = $upload->upload();
if(!$info) {// 上传错误提示错误信息
$data['status'] = 5;
$data['msg'] = $upload->getError();
}else{// 上传成功
$data['url'] = "/".$upload->rootPath.$info['file']['savepath'].$info['file']['savename'];
$up_model=D('uploads');
$up_model->url=$data['url'];
if($up_model->add()){
$data['status'] = 1;
$data['msg'] = "上传成功";
}else{
$data['status'] = 2;
$data['msg'] = "服务器繁忙";
}
}
$this->ajaxReturn($data);
}
$this->display();
}
实例二: (先点击选择文件, 再与其他表单数据一起提交)
uploads.html
<!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" href="/Public/layui/css/layui.css" media="all">
<!-- 注意:如果你直接复制所有代码到本地,上述css路径需要改成你本地的 -->
</head>
<body>
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
</div>
<div class="layui-upload-list">
<img class="layui-upload-img" id="demo1" width="150px">
</div>
<button type="button" class="layui-btn" id="test9">开始上传</button>
<script src="/Public/layui/layui.js" charset="utf-8"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script>
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//选完文件后不自动上传
upload.render({
elem: '#test8'
,url: '{:U("Api/index/upload")}'
,auto: false
//,multiple: true
,choose: function(obj){
console.log(obj)
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#demo1').attr('src', result); //图片链接(base64)
});
}
,bindAction: '#test9'
,done: function(res){
console.log(res)
return layer.msg(res.msg,{icon: res.status,time: 2000});
}
});
});
</script>
</body>
</html>
实测有效:
layui 文件上传 官方文档: http://www.layui.com/doc/modules/upload.html