TP框架配合jquery进行3种方式的多图片上传
- 2019 年 10 月 17 日
- 筆記
用的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); } }); })
四 这是我在平时项目开发中使用过的，现在进行一个总结，希望能帮到各位
