工具系列 | 使用FormData方式上傳文件

服務端代碼

/**
 * 文件上傳
 */
public function uploadFile()
{
    Log::error('文件上傳 : '.json_encode($_FILES));
    $dir = $this->request->post('type', 'file');
    $file = $this->request->file('avatar');
    if (!empty($file)) {
        $info = $file->validate(['size' => 20480, 'ext' => 'jpg,png,gif,pfx,cer'])->move(Env::get('root_path') . 'public/upload/' . $dir);
        if ($info) {
            $file_path = str_replace("\\", "/", '/upload/' . $dir . '/' . $info->getSaveName());
            return response_json(0, '上傳成功',['url' => $file_path]);
        } else {
            return response_json(1, $file->getError());
        }
    } else {
        return response_json(1, '未選擇文件');
    }
}

 前端頁面

 

<span class="img_upload">點擊我上傳</span>

<input type="file" class="avatar" style="display: none;">
<script type="text/javascript" src="/assets/common/js/jquery.min.js"></script>
<script type="application/javascript">
    // 上傳圖片
    $('.img_upload').click(function() {
        $('.avatar').click();
    });

    $('.avatar').change(function() {
        // 獲取上傳文件，拿到type為file的input的具體文件，由於可能存在多選擇文件問題，所以這里是[0]取第一個。
        var _avatar = $('.avatar')[0]['files'][0];
        //判斷是否是圖片類型
        if (!/image\/\w+/.test(_avatar.type)) {
            alert("只能選擇圖片");
            return false;
        }
        if(!/.(jpg|jpeg|png|PNG|JPG|JPEG)$/.test(_avatar.name)){
            alert("請上傳jpg或者png格式的圖片")
            return false;
        }
        if(_avatar.size>9437184){
            alert("您上傳的身份證圖片過大，請上傳不超過1.5M的身份證圖片")
            return false;
        }
        var _fromData = new FormData();
        _fromData.append('username', 'Tinywan');
        _fromData.append('age', 24);
        _fromData.append('avatar', _avatar);

        $.ajax({
            url: "{:url('/index/Test/uploadFile')}",
            type: "POST",
            cache: false,
            data: _fromData,
            dataType: "JSON",
            processData: false, // 設置 processData 選項為 false，防止自動轉換數據格式。
            contentType: false, // 告訴jquery不要設置content-Type請求頭
            success: function(data) {
                // 上傳成功后，清空當前文件，繼續點擊上傳單個文件。否則不能繼續點擊上傳
                $('.avatar').val("");
                console.log(data);
            },
            error: function(data) {
                console.log(data);
            }
        });
    });
</script>

 1、全局文件數組接受參數：$_FILES

{
"avatar": {
"name": "2.png",
"type": "image/png",
"tmp_name": "/tmp/phppFGojm",
"error": 0,
"size": 11965
}
}

 以上接受的參數是通過添加文件

var _avatar = $('.avatar')[0]['files'][0];
_fromData.append('avatar', _avatar);　　

服務端接受

$file = $this->request->file('avatar');　　

說明：這里傳遞的二進制文件名稱必須和服務端接受的名稱同名。其他數據可以通過POST方式接受：$post = $this->request->post();　　

2、增加第三個參數

_fromData.append('avatar', _avatar,'tinywan.png');　

語法：formData.append(name, value, filename); 傳給服務器的文件名稱 (一個 USVString), 當一個 Blob 或 File 被作為第二個參數的時候， Blob 對象的默認文件名是 "blob"。 File 對象的默認文件名是該文件的名稱。更多：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData/append

服務端接受參數

{
"avatar": {
"name": "tinywan.png", // 重點在這里
"type": "image/png",
"tmp_name": "/tmp/phpponpkP",
"error": 0,
"size": 11965
}
}

參考

1、https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

2、https://www.cnblogs.com/lyr1213/p/6238026.html