tp5+ajax实现图片上传且预览

html

<form id="uploadForm" enctype="multipart/form-data">
    上传文件：<input type="file" id="uploadFile" />
</form>
<div id="div">
</div>

js

$("#uploadFile").on("change",function(){
    var formData = new FormData($( "#uploadForm" )[0]);
    formData.append("image", $(this).get(0).files[0]);
    $.ajax({
        url: '{:url("Test/uploadImg")}' ,
        type: 'POST',
        data: formData,
        cache: false, //
        contentType: false, // 不要设置Content-Type请求头
        processData: false, // 不要处理发送的数据
        success: function (data) {
        console.log("路径：",data)
            $("#div").html("").html('<img src="'+data+'" width="640" height="320" />');
        },
        error: function (e) {
            console.log(e)
        }
    });
})

php

//例子
public function uploadImg()
{
    $file = request()->file('image');
    $path = Env::get('root_path').'/public/upload/test';
    $info = $file->move($path);
    if($info){
        $fileName = $info->getSaveName();
        $src = "/upload/test/".$fileName;
    }else{
        // 上传失败获取错误信息
        $src = $file->getError();
    }
    return json($src);
}