首先需要安装一下uploadify,安装位置如图:
首先页面中需要有个容器:
<input id="file_upload" type="file" multiple >
<img style="display: none" id="upload_org_code_img" src="" width="150" height="150">
input用来上传图片
img用来显示上传成功后的缩略图
定义一下路由:
<script>
var SCOPE = {
'uploadify_swf' : '__STATIC__/admin/uploadify/uploadify.swf',
'image_upload' : '{:url('api/image/upload')}',
};
</script>
JS代码如下:
$("#file_upload").uploadify({
'swf' : SCOPE.uploadify_swf,
'uploader' : SCOPE.image_upload,
'buttonText' : '图片上传',
'fileTypeDesc' : 'Image files',
'fileObjName' : 'file',
'fileTypeExts' : '*.jpeg; *.jpg; *.png;', //允许上传的图片类型
// 成功后执行的方法: 在页面img标签中显示缩略图,
'onUploadSuccess' : function(file,data,response){
var obj=JSON.parse(data);
$("#upload_org_code_img").attr("src",obj.data);
$("#file_upload_image").attr("value",obj.data);
$("#upload_org_code_img").show();
}
});
PHP代码如下:
<?php
namespace app\api\controller;
use think\Controller;
use think\Request;
use think\File;
class Image extends Controller{
public function upload(){
// TP5自带类Request 自带文件上传方法 file()
$file=Request::instance()->file('file');
// move('upload') 移动到目录名为“upload” 如果没有此文件就创建
$info=$file->move('upload');
// 判断获取Pathname是否存在,用方法getPathname(),存在即可认为上传成功
if($info && $info->getPathname()) {
return show(1,'success','/'.$info->getPathname());
}
return show(0,'upload error');
}
}