tp5 接收图片_tp5.1+ajax实现图片上传且预览

html：

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('');

},

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 = "/public/upload/test/".$fileName;

}else{

// 上传失败获取错误信息

$src = $file->getError();

}

return json($src);

}

最终效果图：