thinkPHP5 实现webuploader文件上传
webuploader 参考网址:http://fex.baidu.com/webuploader/
首先下载webuploader,将文件夹放进public目录下
然后引入Js和Css:
<!--引入CSS-->
<link rel="stylesheet" type="text/css" href="/webuploader/webuploader.css">
<!--引入Jquery-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--引入JS-->
<script type="text/javascript" src="/webuploader/webuploader.js"></script>
Html:
<div id="uploader" class="wu-example">
<!--用来存放文件信息-->
<div id="thelist" class="uploader-list"></div>
<div class="btns">
<div id="picker">选择文件</div>
<button id="ctlBtn" class="btn btn-default">开始上传</button>
</div>
</div>
Script:
var uploader = WebUploader.create({
// swf文件路径
swf: 'webuploader/Uploader.swf',
// 文件接收服务端。
server: "{:url('uploader')}",
// 选择文件的按钮。可选。
// 内部根据当前运行是创建,可能是input元素,也可能是flash.
pick: '#picker',
// 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传!
resize: false,
// 选完文件后,是否自动上传。
auto:true,
// 图片name
fileVal:'img',
// 单文件
multiple:false,
compress : {
width: 100,
height: 100,
compressSize: 0
}
});
uploader.on( 'uploadSuccess', function( file,res ) {
$('#file').val(res.path)
});
PHP:
public function uploader(){
// 获取表单上传文件 例如上传了001.jpg
$file = request()->file('img');
// 移动到框架应用根目录/public/uploads/ 目录下
if($file){
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
if($info){
$filepath = '/uploads/'. $info->getSaveName();
// 输出 20160820/42a79759f284b767dfcb2a0197904287.jpg
return json(['code'=>200,'msg'=>'success','path'=>$filepath]);
}else{
// 上传失败获取错误信息
echo $file->getError();
}
}
}