ThinkPHP 5 + ajax + jQuery 无刷新上传图片

最近小编对个人博客进行了重新架构，选择了ThinkPHP 5.0框架。深刻感受到用框架搭建网站的便利性。之前页面中 PHP代码 和 HTML 标签混合在一起，页面非常混乱，而且代码量大，维护起来很吃力。并且 ThinkPHP 上手非常容易，开发手册也很全。

言归正传，实现无刷新上传图片

1.首先客户端的ajax请求：

# index.html 文件

                #######  选择图片后，触发事件。

# js文件

function uploadImage(){

        // FormData对象，来发送二进制文件。
        var formdata = new FormData();
        // 将文件追加到 formdata对象中。
        formdata.append("myfile",document.getElementById('myfile').files[0]);
        $.ajax({
            type: "POST",
            url: "upload",
            data:formdata,
            /**
              * 必须false才会避开jQuery对 formdata 的默认处理
              * XMLHttpRequest会对 formdata 进行正确的处理
              */
            processData: false,
            // 告诉jQuery不要去设置Content-Type请求头
            contentType: false,
            dataType: "json",
            success: function(data){
                console.log(data);
            },
            error: function(jqXHR){
               alert("发生错误：" + jqXHR.status);
            },
        });     

2.服务器端响应

/*
 * 接收图片上传
 *  1.通过ajax接收图片。
 *  2.图片上传验证。
 *  3.将图片移动到框架应用目录 public/uploads 目录下。
 *  4.注意：当图片大于2M，由于php.ini配置，会报出一个致命错误。网站上线后需要手动配置。
 */
public function upload()
{
    // 获取上传文件
    $file = request() -> file('myfile');       
    // 验证图片,并移动图片到框架目录下。
    $info = $file -> validate(['size' => 512000,'ext' => 'jpg,png,jpeg','type' => 'image/jpeg,image/png']) -> move(ROOT_PATH.'public'.DS.'uploads');
    if($info){
        // $info->getExtension();         // 文件扩展名
        $mes = $info->getFilename();      // 文件名
        echo '{"mes":"'.$mes.'"}';
    }else{
        // 文件上传失败后的错误信息
        $mes = $file->getError();
        echo '{"mes":"'.$mes.'"}';
    }
}

OK，完成了。

---

在这里可以看到服务器端代码量非常少，既完成了对上传的图片的严格验证，又实现了错误信息的封装。