ajax上传图片浅析（以及不传图片的情况）。tp5

最新推荐文章于 2021-08-06 04:20:19 发布

原创最新推荐文章于 2021-08-06 04:20:19 发布 · 808 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

ajax

本文介绍了一个使用FormData对象来上传文件的前端示例代码，并展示了如何通过原生JS选择文件对象及利用jQuery发起POST请求的过程。此外，还提供了一个后端处理上传文件的PHP示例，包括检查文件是否存在并进行相应操作。

先上代码（前）

function jqSubmit() {
var file_obj = document.getElementById('pic').files[0];//注意这里的写法,因为files是原生的js对象才有的，所以要用原生的选择器选取该对象(就是input标签)。如果没上传文件，file_obj就是undefined

var fd = new FormData();//创建一个表单对象fd，ajax传值就传这个对象

fd.append('username', '用户名');//向fd里面添加另外一个参数

//如果不传图片，只需if判断一下即可

if (typeof(file_obj) != 'undefined') {
fd.append('pic', file_obj);//向fd里面添加一个文件（就是我们要传的图片file_obj）
}

fd.append('pic', file_obj);

$.ajax({
url:'/upload_file/',
type:'POST',
data:fd,//传值就传fd对象了
processData:false, //告诉jQuery不要处理数据
contentType: false, //告诉jQuery不要设置contentType
//这儿的三个参数其实就是XMLHttpRequest里面带的信息。
success:function (res) {
//这里处理后台返回的res
}

})

}

后台

//添加文章
public function add()
{
if (request()->isPost()) {
$data = request()->post();
$data['create_time'] = time();
if (!empty($_FILES['pic']) && $_FILES['pic']['size']>0) {
$data['pic'] = $this->upload('pic');
}
$res = $this->articleModel
->insert($data);
if ($res) {
//添加成功
echo 1;
} else {
//添加失败
echo 0;
}
} else {
return view();
}
}

标签

#ajax上传图片