注：我們使用的是免費的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