工具系列 | 使用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