本文实例讲述了Thinkphp框架+Layui实现图片/文件上传功能。分享给大家供大家参考,具体如下:
在项目中用到了,再网上找了现成的代码都是借口异常或者非法上传,所以在一番摸索搞定之后拿来和大家分享。
html:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
< form class = "layui-form layui-form-pane" action = "" style = "margin-top:20px;" enctype = "multipart/form-data" >
< center >
< div class = "layui-upload-drag" id = "uploadBanner" >
< img class = "layui-upload-img" id = "upload-photo" >
< i class = "layui-icon" id = "upload-icon" ></ i >
< p >点击上传,或将文件拖拽到此处</ p >
< p >建议尺寸1920*512</ p >
</ div >
< input type = "hidden" id = "res" name = "banner_photo" value = "" lay-verify = "required" />
< div class = "layui-form-item" style = "margin-top:10px;" >
< button class = "layui-btn" lay-submit = "" lay-filter = "sub" >提交</ button >
</ div >
< div id = "demoText" ></ div >
</ center >
</ form >
|
JS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
layui.use( 'upload' , function (){
var $ = layui.jquery
,upload = layui.upload;
//普通图片上传
var uploadInst = upload.render({
elem: '#uploadBanner'
,url: "{:U('Api/doUploadPic')}"
,before: function (obj){
//预读本地文件示例,不支持ie8
obj.preview( function (index, file, result){
$( '#upload-photo' ).attr( 'src' , result); //图片链接(base64)
$( '#upload-photo' ).attr( 'style' , 'height:10rem;' );
$( '#upload-icon' ).attr( 'style' , 'display:none;' );
});
}
,done: function (res, index, upload){
//如果上传失败
if (res.code > 0){
return layer.msg( '上传失败' );
}
//上传成功
console.log( "成功啦!" + obj2string(res) + " " + index + " " + upload);
}
,error: function (){
//演示失败状态,并实现重传
var demoText = $( '#demoText' );
demoText.html( '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>' );
demoText.find( '.demo-reload' ).on( 'click' , function (){
uploadInst.upload();
});
}
});
});
|
PHP接口:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
public function doUploadPic() //上传模块
{
$upload = new \Think\Upload();
$upload ->maxSize = 3145728;
$upload ->exts = array ( 'jpg' , 'gif' , 'png' , 'jpeg' );
$upload ->rootPath = './Public/' ; // 设置附件上传根目录
$upload ->savePath = 'upload/' ; // 设置附件上传子目录
$info = $upload ->upload();
if (! $info ){
$this ->error( $upload ->getError());
} else {
foreach ( $info as $file ){
$data = '/Public' . $file [ 'savepath' ] . $file [ 'savename' ];
$file_a = $data ;
echo '{"code":0,"msg":"成功上传","data":{"src":"' . $file_a . '"}}' ;
}
}
}
|
图片就上传到/Public/upload文件夹下了:
希望本文所述对大家基于ThinkPHP框架的PHP程序设计有所帮助。
原文链接:https://blog.csdn.net/qq_17497931/article/details/81290604