tp5框架中Ajax上传图片
在html中必须要用底层操作$.ajax，不能用高级操作$.post,$,get
首先form表单中要加一个
enctype
=”multipart/form-data”
给上传图片增加一个onchange事件
function
header
() {
//行内绑定事件
let
data
=
new
FormData
(
document
.
querySelector
(
‘
.myform
‘
));
//创建表单对象,用document获取表单对象
$
.
ajax
({
url
:
“{:url(‘user/uploads’)}”
,
//url地址
data
:
data
,
type
:
‘post’
,
//类型
contentType
:
false
,
//上传文件必须要有
processData
:
false
,
//
默认情况下，processData 的值是 true，其代表以对象的形式上传的数据都会被转换为字符串的形式上传。而当上传文件的时候，则不需要把其转换为字符串，因此要改成false
success
:
function
(e) {
if
(e.
status
==
1
) {
$
(
‘
.header_img
‘
).
prop
(
‘src’
,e.
head_img
);
//prop给属性赋值
对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。快速，准确。
对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
$
(
‘
.header_img
‘
).
css
(
‘display’
,
‘block’
);
//设置css的属性
}
else
{
alert
(
‘e.msg’
);
}
}})
}
后台
function
uploads
()
{
if
(!
$filename
=
Upload
::
singleupload
(
‘head_img’
)) //封装了一个singleupload方法
{
$e
=[
‘status’
=>
0
,
‘msg’
=>
Upload
::
$upload_error
];
}
else
{
$e
= [
‘status’
=>
1
,
‘head_img’
=>
$filename
];
}
return
json
(
$e
);
//因为ajax是用json传输数据的所以要转换
}
upload控制器中里面定义了一个singleupload方法
class Upload
{
public static $upload_error;
public static function singleupload($name){
//异常处理
try{
//获取表单上传文件
$file=request()->file($name);
}
catch (Exception $e){
//$this->error('没有文件被上传');
self::$upload_error='没有文件被上传';
return false;
}
$info=$file->validate(['size'=>'2000000','ext'=>'jpg,png,jpeg,gif','type'=>['image/jpeg','image/png','image/gif']])->move('./uploads');
if (!$info){
self::$upload_error=$file->getError();
return false;
}
$filename='/uploads/'.$info->getSaveName();
$filename=str_replace('\\','/',$filename);
return $filename;
}
}