sur*_*amy 11 php ajax jquery twitter-bootstrap laravel-5.4
Laravel观点:
<form enctype="multipart/form-data" method="post" name="imagesform" id="imagesform" >
<input type="hidden" name="_token" value="{{ csrf_token()}}">
<div>
<label id="show" for="files" class="button">Upload photo</label>
<input id="files" name="images" style="visibility:hidden;" type="file">
</div>
<button type="submit" class="save" id="saveImage" style="border-radius: 8px; padding: 5px 15px;">SAVE</button>
</form>
Run Code Online (Sandbox Code Playgroud)
这是我上传图像的代码(它发生在我的引导程序模型中).当我上传图像并单击提交按钮时,图像应该插入到数据库中,并且应该检索并显示在视图页面上.
Ajax代码:
$("#saveImage").click(function(e){
// var formdata=new FormData($("#imagesform")[0]);
//alert(formdata);
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
});
$.ajax({
url: 'saveImages/{{$dataId}}',
type: 'POST',
data:new FormData($("#imagesform")),
success: function (data) {
alert(data)
},
cache: false,
processData: false
});
return false;
});
Run Code Online (Sandbox Code Playgroud)
这是ajax代码,我试过了.但是formdata的警告显示[object FormData]和浏览器控制台显示Method not allowed exception
Laravel路线:
Route::post('saveImages/{dataId}',['as' => 'saveImages','uses'=>'priceDetails@saveImages']);
Run Code Online (Sandbox Code Playgroud)
控制器:
public function saveImages(Request $imagesform,$dataId)
{
if (Input::hasFile('images'))
{
$name = $this->getImageId().".".$imagesform->file('images')->getClientOriginalExtension();
$image = $imagesform->file('images');
$resize = Image::make($image)->resize(700, 300)->encode($imagesform->file('images')->getClientOriginalExtension());
$hash = md5($resize->__toString());
$path = "public/" . $name;
Storage::put($path, $resize->__toString());
}
$insertImages=new photosModel;
$insertImages->imagesid=$this->getimagesId();
$insertImages->deviceCategoryId=$dataId;
$insertImages->uploadedImages=$name;
$insertImages->save();
return $this->formImages($dataId);
}
public function formImages($dataId){
$dataId=$dataId;
$images=photosModel::all();
return view('addProductDetails1')->with('images',$images)->with('dataId',$dataId);
}
Run Code Online (Sandbox Code Playgroud)
要通过AJAX上传文件,您需要使用XHR Level 2.本FormData类需要一个HTMLFormElement,如果你想发送其键值在构造函数中.
你应该使用:
new FormData( document.getElementById('imagesform') );
Run Code Online (Sandbox Code Playgroud)
你也可以使用jQuery:
new FormData( $("#imagesform").get(0) )
Run Code Online (Sandbox Code Playgroud)
在另一个类似问题中查看我的答案以获取更多信息.
更新: 看到你的评论你的问题也在于Laravel路线.如果错误代码为500并且显示消息"Method not allowed",则需要检查routes/web.php中的路由.请在此处输入错误的堆栈跟踪和您的路由文件(使用pastebin或类似文件).