所以我有一个名为'images'的表,在其中我有数据库中的字段,如'image1''image2'等。
现在,用户正在单独上传每个图像,因此表格中有8个字段用于上传8个不同的图像,但是如何保存此服务器端?我知道如何上传1张图片,但我怎样才能为多张图片上传?
到目前为止,这是我的代码,我收到了这些错误:
未捕获的TypeError:无法读取未定义的属性“gallery”
和
POST http://localhost:8000/gallery 404(未找到)
控制器:
public function gallery(Request $request) {
if($request->hasFile('gallery'))
{
$image = Input::file('gallery');
$files = count($files);
$uploadcount = 0;
foreach($files as $file) {
$filename = time() . '.' . $image->getClientOriginalExtension();
$path = public_path('gallery/' . $filename);
$image_path = ('gallery/' . $filename);
Image::make($image->getRealPath())->fit(60, 51)->save($path);
$uploadcount++;
$file = $request->file('gallery');
$session = session()->get('key');
$gallery = new Image();
$gallery->image1 = $image_path;
$gallery->business_id = $session;
$gallery->save();
return ['url' => url('gallery/' . $filename)];
}
}
AJAX:
function submitGallery() {
var fd = new FormData($(".upload_gallery")[0]);
fd.append('img', $('.img'));
$.ajax({
url: '/gallery',
data: fd,
dataType: 'json',
async: false,
type: 'post',
processData: false,
contentType: false,
success: function(data) {
$(".images").attr("src", data.url);
$('.messages').append('<div class="alert alert-success">Image Uploaded!<div>');
$(".alert-success").fadeOut(5000);
},
error: function(data) {
var errors = data.responseJSON; //this will get the errors response data.
//show them somewhere in the markup
//e.g
var errorsHtml = '<div class="alert alert-danger">';
errorsHtml += errors.gallery[0]; //showing only the first error.
errorsHtml += '</div>';
$('.messages').append('<div class="alert alert-danger">File type not supported! Use files with image extension only!<div>'); //appending to a <div id="form-errors">
$(".alert-danger").fadeOut(5000);
}
});
}
刀片:
<div id="gallery" class="sortable">
<form class="upload_gallery" action="{{ action('BusinessController@gallery') }}" enctype="multipart/form-data" role="form" method="POST">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<div id="image1" class="image-gallery">
<img class="images" src="#" />
<input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file" data-size="sm" data-badge="false" onchange="submitGallery();" />
</div>
<div id="image2" class="image-gallery">
<img class="images" src="#" />
<input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file" data-size="sm" data-badge="false" onchange="submitGallery();" />
</div>
<div id="image3" class="image-gallery">
<img class="images" src="#" />
<input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file" data-size="sm" data-badge="false" onchange="submitGallery();" />
</div>
<div id="image4" class="image-gallery">
<img class="images" src="#" />
<input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file" data-size="sm" data-badge="false" onchange="submitGallery();" />
</div>
<div id="image5" class="image-gallery">
<img class="images" src="#" />
<input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file" data-size="sm" data-badge="false" onchange="submitGallery();" />
</div>
<div id="image6" class="image-gallery">
<img class="images" src="#" />
<input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file" data-size="sm" data-badge="false" onchange="submitGallery();" />
</div>
<div id="image7" class="image-gallery">
<img class="images" src="#" />
<input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file" data-size="sm" data-badge="false" onchange="submitGallery();" />
</div>
<div id="image8" class="image-gallery">
<img class="images" src="#" />
<input style="width: 100%;height: 100%; opacity: 0;" name="gallery" id="gallery" class="img" data-input="false" type="file" data-size="sm" data-badge="false" onchange="submitGallery();" />
</div>
</form>
</div>
路线:
Route::post('gallery', 'BusinessController@gallery');
当然,如果你知道比我的更好的做法,请告诉我,我愿意接受建议