tp5下的插件uploadify的使用

目标:1.部署前端插件uploadify

         2.编写image.js

         3.编写图片上传API接口实现图片完美异步上传

预先配置:

config.php:

<?php  

//配置文件  

return [  

    'default_return_type' => 'json',  

];  

这样子api的输出都是json形式来输出的

插件处理:

将下载好的插件解压到,入口文件的后台模块,插件内容,对里面的部分文件做下修改:

uploadify.css 中的

.uploadify-queue-item .cancel a {  

    <span style="color:#ff0000;">background: url('./uploadify-cancel.png') 0 0 no-repeat;</span>  

    float: right;  

    height: 16px;  

    text-indent: -9999px;  

    width: 16px;  

}  

修改为:

background: url('./uploadify-cancel.png') 0 0 no-repeat;  

插件的引入:

在对应的模块:

footer.html引入js:


{load href="__STATIC__/admin/uploadify/jquery.uploadify.min.js" /}  

{load href="__STATIC__/admin/js/image.js" /}  

然后再建立image.js

将http://www.uploadify.com/documentation/uploadify/onuploadsuccess/页面的

$(function() {  

    $("#file_upload").uploadify({  

        'swf'             : '/uploadify/uploadify.swf',  

        'uploader'        : '/uploadify/uploadify.php',  

        'onUploadSuccess' : function(file, data, response) {  

            alert('The file ' + file.name + ' was successfully uploaded with a response of ' + response + ':' + data);  

        }  

    });  

});  

由于这里面的地址是写死的,为了方便代码的复用性,做些更改找到对应模块的view层,找到对应的页面,定义

var SCOPE = {  

    'uploadify_swf' :'__STATIC__/admin/uploadify/uploadify.swf',  

    'image_upload' :'{:url('api/image/upload')}',  

};  

然后在image.js修改为:

'swf'             : SCOPE.uploadify_swf,  

'uploader'        : SCOPE.image_upload,  

继续完善image.js:

$(function() {  

    $("#file_upload").uploadify({  

        'swf'             : SCOPE.uploadify_swf,  

        'uploader'        : SCOPE.image_upload,  

        'buttonText'      : '图片上传',  

        'fileTypeDesc'    : 'Image Files',  

        'fileTypeExts'    : '*.gif; *.jpg; *.png',     

        'fileObjName'     : 'file',  

        'onUploadSuccess' : function(file, data, response) {  

        }  

    });  

编写api接口image.php

<?php  

namespace app\api\controller;  

use think\Controller;  

use think\Request;  

use think\File;  

class Image extends Controller  {  

    public function upload(){  

        $file = Request::instance()->file('file');  

        //给定一个目录  

        $info = $file->move('upload');  

        if ($info && $info->getPathname()){  

            return show(1,'success','/'.$info->getPathname());  

        }  

        return show(0,'upload error');  

    }  

}  

upload为图片上传目录,会在入口文件目录自动生成,图片上传后有个回调的接口images中的onUploadSuccess,为了使图片能够显示,继续完善image.js

$(function() {  

    $("#file_upload").uploadify({  

        'swf'             : SCOPE.uploadify_swf,  

        'uploader'        : SCOPE.image_upload,  

        'buttonText'      : '图片上传',  

        'fileTypeDesc'    : 'Image Files',  

        'fileTypeExts'    : '*.gif; *.jpg; *.png',     

        'fileObjName'     : 'file',  

        'onUploadSuccess' : function(file, data, response) {  

            //console.log(file);  

            //console.log(data); {"status":1,"message":"success","data":"\/upload\\20170611\\1c365af70093b2ecab7ccca9e645b300.jpg"}  

            //console.log(response); true  

            if(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();  

            }  

        }  

    });  

 });    


其中

$("#upload_org_code_img").attr("src",obj.data);  

$("#upload_org_code_img").show();  

这个是为了图片能够正常显示出来


$("#file_upload_image").attr("value",obj.data);  

这个是表单提交的时候获取图片

如果页面有其他地方也需要可以修改里面的$("#file_upload")去对应id就可以了