uploadify结合ThinkPHP5上传类实现异步上传图片

uploadify插件官网：HTML5 File Upload Script, jQuery Multiple File Upload Plugin

注：我们使用的是免费的Flash版本

①引入必需的文件

1. jQuery
2. jquery.uploadify-3.1.min.js
3. uploadify.css

②HTML元素的搭建（结合bootstrap）

<div class="form-group">
    <label class="col-sm-2 control-label">图片:</label>
    <div class="col-sm-10">
        <input id="file_upload"  type="file" multiple="true" >
        <img style="display:none" id="upload_org_code_img" src="" width="150" height="150">
        <input id="file_upload_image" name="url" type="hidden" multiple="true" value="">
    </div>
</div>

两个input和一个img标签构成了uploadify的核心使用方法

1. id为file_upload的input框为上传图片的按钮
2. img用于显示上传成功之后的图片
3. id为file_upload_image的input框是隐藏的，负责提交图片的地址至服务器

③image.js文件的编写

$(function() {
    $("#file_upload").uploadify({
        'swf'            :    URL.swf_url,
        'uploader'       :    URL.image_url,
        'buttonText'     :   '图片上传',
        'fileTypeDesc'   :   '图片',
        'fileObjName'    :   'photo',
        'fileTypeExts'   :   '*.gif; *.jpg; *.png',
        'onUploadSuccess' : function(file, data, response) {
            if(response){
                var obj = JSON.parse(data);
                $("#upload_org_code_img").attr("src", obj.data);
                $("#upload_org_code_img").show();
                $("#file_upload_image").attr("value", obj.data);
            }
        }
    });
});

常用属性详解

1. swf：对应uploadify.swf的路径
2. uploader：上传文件的API
3. buttonText：按钮显示的文字
4. fileTypeDesc：可选文件的描述
5. fileObjName：设置在后台使用的文件名
6. fileTypeExts：设置允许上传的文件扩展名

方法

onUploadSuccess：上传成功后触发的方法

有三个参数：file，data，response

1. file：返回上传文件的对象
2. data：上传文件的API的返回值
3. response：上传成功则返回true

④API的编写

public function upload()
{
    $file = Request::instance()->file('photo');
    //目录
    $info = $file->move('upload');
    if($info && $info->getPathname()){
        return show(1, '图片上传成功', '\\'.$info->getPathname());
    }
    return show(0,'图片上传失败');
}

1.获取上传的图片

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

其中 file(）函数中填入fileObjName属性中设置的值

2.移动到特定的目录

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

3.返回JSON格式的数据

关于show方法：

function show($status, $message, $data = array())
{
    $result = array(
        'status' => $status,
        'message' => $message,
        'data' => $data
    );
    return json($result);
}

如果执行完以上操作后 浏览器还是使用上传功能的话考虑以下问题

https://www.jianshu.com/p/940088f4923c