php - 使用 Ajax 和 Laravel 5.6 上传多张图片
问题描述
首先,我想为我的工程师道歉。
其次,我不想使用任何插件。
我想上传多个图像,我可以在没有 ajax 的情况下完成,但我想用 Ajax 上传。我把我的代码放在这里。
<form action="{{route('image-upload.store')}}" method="post" enctype="multipart/form-data">
{{csrf_field()}}
<input type="file" id="image-upload" name="image_upload[]" enctype="multipart/form-data" multiple>
<button type="submit">save</button>
</form>
控制器 :
if ($request->hasFile('image_upload')) {
$images = $request->file('image_upload');
foreach ($images as $image) {
$randonName = rand(1, 200);
$name = $image->getClientOriginalName();
$storename = $randonName . '_' . $name;
$image->move(public_path('images/test'), $storename);
}
}
return redirect()->back();
上面的代码只是在没有 Ajax 的情况下上传多个图像。
这里阿贾克斯:
html:
<input type="file" id="image-upload" name="image_upload[]" enctype="multipart/form-data" multiple>
阿贾克斯:
$.ajaxSetup({
headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')}
});
$('#image-upload').change(function () {
event.preventDefault();
let image_upload = new FormData();
let TotalImages = $('#image-upload')[0].files.length; //Total Images
let images = $('#image-upload')[0];
for (let i = 0; i < TotalImages; i++) {
image_upload.append('images', images.files[i]);
}
image_upload.append('TotalImages', TotalImages);
$.ajax({
method: 'POST',
url: '/image-upload',
data: image_upload,
contentType: false,
processData: false,
success: function (images) {
console.log(`ok ${images}`)
},
error: function () {
console.log(`Failed`)
}
})
})
控制器 :
if ($request->images) {
$images = $request->images;
$total=$request->TotalImages;
$imagesName = $images->getClientOriginalName();
$randonName = rand(1, 200);
$images->move(public_path('/images/test'), $randonName . '.jpg');
return response()->json($randonName);
}
现在此代码工作正常,但仅适用于一个图像。我知道我已经把它放了Loop
,我放了,但没有得到我的回应。
所以如果有人能告诉我怎么做?
这里我的努力:
if ($request->images) {
$total=$request->TotalImages;
$images = $request->images;
for($j=0; $j<$total;$j++){
$imagesName = $images->getClientOriginalName();
$randonName = rand(1, 200);
$images->move(public_path('/images/test'), $randonName . '.jpg');
}
return response()->json($randonName);
}
if ($request->images) {
$images = $request->images;
foreach ($images as $image) {
$imagesName = $images->getClientOriginalName();
$randonName = rand(1, 200);
$image->move(public_path('/images/test'),$randonName . $imagesName . $randonName . '.jpg');
}
}
解决方案
这也可以工作这将发送图像数组以便在控制器中轻松获取
for (let i = 0; i < TotalImages; i++) {
image_upload.append('images[]', images.files[i]);
}
推荐阅读
- javascript - 移动设备上的 jQuery 悬停方法在重复时不起作用
- sql - Postgre SQL 中的数值数据类型
- java - 如何支持相同的屏幕尺寸但不同的 dpi?
- dll - 我需要适用于 Windows 10 的当前 qrcodelib.dll
- java - 如何从 AWS Cognito 用户池检查用户密码?
- opencv - 从 3D 三角点恢复姿势
- docker - 关于自动化安装脚本的 Drupal 问题
- javascript - 移动网络 - 如何在键盘打开时获取屏幕高度
- oauth-2.0 - FitBit 订阅 API:用户和应用程序之间的关联在哪里
- c# - 来自 Logitech C920 USB 网络摄像头的图像帧何时被 UWP MediaFrameReader 解码