介绍

最近用了下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 100uploader.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() ] );}
}

thinkphp集成webuploader实战相关推荐

thinkphp集成系列之phpmailer批量发送邮件
前段时间写了一篇博客:thinkphp集成系列之短信验证码.订单通知说了这是一个短信通知泛滥的年代:大部分网站的邮箱注册都已经被短信注册所取代: 但是邮件和短信相比在一些场景依然有着重要的意义和优势 ...
集成学习实战之 -- RandomForest
集成学习实战之 -- RandomForest 一.引入 1.Linear model a.用线性模型拟合非线性数据: 1)拟合较平滑的曲线 2)拟合不规则曲线 2.引入决策树 a.两个问题 1)决策 ...
php 脚手架,thinkphp集成前端脚手架Vue-cli的教程图解
本文主要介绍怎么在Thinkphp中集成后台前端脚手架框架Vue-Cli. 一.安装Vue-Cli到Thinkphp中 1.1.1 检查是否安装node 终端输入npm的指令如果没有安装的话会提示未找 ...
thinkphp集成银联网关支付简单实例
thinkphp集成银联手机网关支付简单实例准备工作网银手机网关支付产品开发包下载: https://open.unionpay.com/ajweb/help/file/toDetailPage? ...
SpringBoot笔记：SpringBoot集成JWT实战
文章目录 JWT 简介概念 JWT 的认证流程优缺点 JWT 消息构成 header playload signature SpringBoot 集成 JWT 实战 maven 依赖 JwtUti ...
ThinkPHP集成支付宝担保支付
概述支付宝担保支付 ThinkPHP集成支付宝担保交易 1.准备工作 2.自定义Action类 3.代码下载概述现在的网站功能越来越全乎了,很多网站都需要做支付功能,而且很多大平台都提供了各式各 ...
SharePoint 集成OWA实战教程-杨建宇（霖雨）-专题视频课程
SharePoint 集成OWA实战教程-312人已学习课程介绍本课程以SharePoint 2013 Server版本为环境,为大家演示介绍如何在上面集成Office Web A ...
ThinkPHP 集成 PHPUnit 8 测试框架进行单元测试
ThinkPHP 5.1 集成 PHPUnit 8 测试框架本项目仅适用于运行 PHP7.2 以上的环境!对于低版本 PHP 请根据需要调整 PHPUnit 的版本! 声明由于原项目 think- ...
日志服务与SIEM（如Splunk）集成方案实战 1
背景信息目标本文主要介绍如何让阿里云日志服务与您的SIEM方案(如Splunk)对接, 以便确保阿里云上的所有法规.审计.与其他相关日志能够导入到您的安全运维中心(SOC)中. 名词解释 LOG( ...
ElasticSearch集成SpringBoot+实战
ElasticSearch集成SpringBoot+搜索页面实战(仿京东) SpringBoot和es相关操作 es集成SpringBoot 使用springboot操作es API 索引相关文档相 ...

thinkphp集成webuploader实战

介绍