TP5.0中用uploadify实现图片上传

时间:2022-10-17 00:29:50

首先需要安装一下uploadify,安装位置如图:

TP5.0中用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');
    }
}