thinkphp集成webuploader实战
介绍
最近用了下thinkphp
搞自己的博客,期间用到了百度的webuploader
上传图片。百度出来的参考质量一言难尽,写教程没有一点追求,千篇一律的复制粘贴,某些个作者自己都没搞清楚就发文,误人又误己,特此记录方便自己查阅的同时让大家少走弯路,看这一篇和官方文档足以。
- 参考文档
http://fex.baidu.com/webuploader/doc/index.html#WebUploader_Uploader_removeFile
https://www.kancloud.cn/manual/thinkphp5/155159
效果演示
写教程不上图的都是耍流氓:)
开发步骤
注意
:此处演示的是单文件上传,如果要多文件的话去掉配置项中的fileNumLimit
。
引入必要的资源
<link href="__STATIC__/common/plugin/webuploader/webuploader.css" rel="stylesheet">
<link href="__STATIC__/common/plugin/webuploader/style.css" rel="stylesheet">
<script src="__STATIC__/common/plugin/webuploader/webuploader.min.js"></script>
添加表单
<div id="uploader-demo" style="margin-top: 10px;">
<!--用来存放item-->
<div id="fileList" class="uploader-list">
</div>
<input type="hidden" id="img_input" name="file_image" value="">
<button onclick="chooseImg(this)" class="btn btn-success" type="button">选择图片</button>
<div id="picker">上传图片</div>
</div>
js脚本
// 缩略图上传
var $list=$("#fileList");
var thumbnailWidth = 150; //缩略图高度和宽度 (单位是像素),当宽高度是0~1的时候,是按照百分比计算,具体可以看api文档
var thumbnailHeight = 150;
var uploader = WebUploader.create({
// 选完文件后,是否自动上传。
auto: true,
// swf文件路径
swf: '/static/common/plugin/webuploader/uploader.swf', //加载swf文件,路径一定要对
// 文件接收服务端。
server: hdjs.uploader,
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker',
fileNumLimit: 1, // 单文件上传
// 只允许选择图片文件。
accept: {
title: 'Images',
extensions: 'gif,jpg,jpeg,bmp,png',
mimeTypes: 'image/'
},
//需要图片压缩则加入以下参数
compress:{
width: 700,
//height: 900,
// 图片质量,只有type为`image/jpeg`的时候才有效。
quality: 90,
// 是否允许放大,如果想要生成小图的时候不失真,此选项应该设置为false.
allowMagnify: false,
// 是否允许裁剪。
crop: false,
// 是否保留头部meta信息。
preserveHeaders: true,
// 如果发现压缩后文件大小比原来还大,则使用原来图片
// 此属性可能会影响图片自动纠正功能
noCompressIfLarger: false,
// 单位字节,如果图片大小小于此值,不会采用压缩。
compressSize: 1024
}
});
//上传完成事件监听
uploader.on( 'fileQueued', function(file) {
var $li = $(
//'<div id="' + file.id + '" class="file-item thumbnail">' +
'<div id="WU_FILE_0" class="file-item thumbnail">' +
'<img>' +
'<div class="info">' + file.name + '</div>' +
'<em class="close" style="position:absolute; top: 0px; right: -14px;" title="删除这张图片" οnclick="removeImg(this)">×</em>'+
'</div>'
),
$img = $li.find('img');
// $list为容器jQuery实例
$list.append( $li );
// 创建缩略图
// 如果为非图片文件,可以不用调用此方法。
// thumbnailWidth x thumbnailHeight 为 100 x 100
uploader.makeThumb( file, function( error, src ) {
if ( error ) {
$img.replaceWith('<span>不能预览</span>');
return;
}
$img.attr( 'src', src );
}, thumbnailWidth, thumbnailHeight );
});
// 文件上传成功
uploader.on('uploadSuccess', function(file,ret){
console.log(ret);
$('#arc_thumb').val(ret.saved_path);
});
- 下面是移除图片的函数
function removeImg(obj) {
uploader.removeFile( 'WU_FILE_0' );
$('#WU_FILE_0').remove();
$('#arc_thumb').val('');
}
thinkphp上传代码
//上传文件
public function uploader ()
{
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file( 'file' );
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move( ROOT_PATH . 'public' . DS . 'uploads' );
//halt($info);
if ( $info ) {
// 对windows下反斜线转换为正斜线
$saved_name = str_replace("\\","/",$info->getSaveName());
$data = [
'name' => input( 'post.name' ) ,
'filename' => $info->getFilename() ,
'path' => 'uploads/' . $saved_name,
'extension' => $info->getExtension() ,
'createtime' => time() ,
'size' => $info->getSize(),
];
Db::name( 'attachment' )->insert( $data );
echo json_encode( [ 'valid' => 1 , 'message' => CONTEXT_PATH . 'uploads/' . $saved_name ,'saved_path'=> $saved_name] );
}
else {
// 上传失败获取错误信息
echo json_encode( [ 'valid' => 0 , 'message' => $file->getError() ] );
}
}