标签：formdata method 项目开发 显示 图片上传 function url i++ erro
用的TP5.1框架+jquery
一 使用form表单方式进行多图片上传
html代码：
<form action="../admin/admin/cs" enctype="multipart/form-data" method="post">
<input type="file" name="image[]" /> <br>
<input type="file" name="image[]" /> <br>
<input type="file" name="image[]" /> <br>
<input type="button" value="上传" id="imgbtn"/>
</form>
../admin/admin/cs的PHP代码：
public function cs()
{
// 获取表单上传文件
$files = request()->file(‘image‘);
$file_path = ENV::get(‘root_path‘) . ‘public/ab‘;
!file_exists($file_path) && mkdir($file_path, 0755, true);
foreach($files as $file){
//move后面加个‘‘，代表使用图片原文件名，不用则生成随即文件名可
$info = $file->move($file_path, ‘‘);
if(!$info) echo $file->getError();
}
}
二 使用file的多文件上传属性进行多图片上传
html代码：
<input type="file" accept="image/*" multiple="multiple" onchange="upload(this)"/>
jquery代码：
let fd = new FormData();
function upload(_this) {
let filelist = _this.files;
let l = filelist.length;
//循环将文件全部追加到fd中
for(i = 0; i < l; i++) fd.append("image[]", filelist[i]);
$.ajax({
type: "POST",
url: "../admin/admin/cs", //这个PHP代码还是上面那个
data: fd,
processData : false,
contentType : false,
success: function(res){
console.log(res);
}
});
}
我选了3个文件，分别是03.jpg 04.jpg 05.jpg
选好之后显示3个文件，文件夹中也成功添加了3个对应的文件，我帮你们看了下，确实是刚才选择的那3张图片
三 利用多个file类型input进行ajax无刷新上传
html代码：
<input type="file" accept="image/*" onchange="upload(this)"/> <input type="file" accept="image/*" onchange="upload(this)"/> <input type="file" accept="image/*" onchange="upload(this)"/> <input type="button" id="btn" value="上传">
query代码：
let fd = new FormData();
function upload(_this) {
//上面是多个文件，这里是一个文件，所以在files后面加个[0]
fd.append("image[]", _this.files[0])
};
$(‘#btn‘).click(() =>{
$.ajax({
type: "POST",
url: "../admin/admin/cs", //还是之前那个PHP代码
data: fd,
processData : false,
contentType : false,
success: function(res){
console.log(res);
}
});
})
四 这是我在平时项目开发中使用过的，现在进行一个总结，希望能帮到各位
标签：formdata method 项目开发 显示 图片上传 function url i++ erro
原文地址：https://www.cnblogs.com/qczy/p/11689552.html
