[英]Image upload not working through ajax Laravel
Having a weird issue and I'm sure it's got something to do with the way my script is grabbing the value of the file input field.遇到一个奇怪的问题,我确定它与我的脚本获取文件输入字段值的方式有关。
I know the controller function works because I've been able to do it by manually submitting the form without using ajax.我知道 controller function 有效,因为我已经能够通过手动提交表单而不使用 ajax 来做到这一点。
I also know the ajax works in sending and receiving the request because I tested it by modifying it to parse a string back and forth which worked.我也知道 ajax 可以发送和接收请求,因为我通过修改它来测试它来回解析一个有效的字符串。
Additionally I can see that the script is grabbing the file as when I select a file, it shows the selected file in the console.此外,我可以看到脚本正在抓取文件,就像我 select 文件一样,它在控制台中显示了选定的文件。
In my browser I'm getting a 500 error and in Laravel I'm only getting this:在我的浏览器中出现 500 错误,在 Laravel 中我只得到这个:
Symfony\Component\Debug\Exception\FatalThrowableError: Call to a member function getClientOriginalExtension() on string in C:\123\app\Http\Controllers\MyController.php:156 Symfony\Component\Debug\Exception\FatalThrowableError:调用成员 function getClientOriginalExtension() on string in C:\123\app\Http\Controllers\MyController.php:156
I've tried updating the controller to use Request->logo instead with no success.我尝试更新 controller 以使用 Request->logo 代替,但没有成功。
View:看法:
<form enctype="multipart/form-data" class="form-horizontal" method="POST" action="{{ url('studio/uploadLogo') }}">
{{ csrf_field() }}
<div class="form-group{{ $errors->has('studioname') ? ' has-error' : '' }}">
<label for="imageInput" class="col-md-4 control-label">Logo</label>
<div class="col-md-6">
<input data-preview="#preview" name="logo" type="file" id="imageInput">
<img id="preview" src="" style="display: none"></img>
<input class="form-control" type="submit">
</div>
</div>
</form>
Script:脚本:
$('#imageInput').change(function (e) {
e.preventDefault();
var logo = $('#imageInput').val();
console.log(logo);
$.ajax({
type: "POST",
url: '/studio/uploadLogo',
data: {logo: logo},
success: function( data ) {
console.log(data);
}
});
});
Controller: Controller:
public function uploadLogo() {
$file = Input::file('logo')->getRealPath();
$photoName = str_random(20) . '.' . Input::file('logo')->getClientOriginalExtension();
Input::get('logo')->move(public_path('avatars'), $photoName);
$response = array(
'status' => 'success',
'data' => $photoName
);
return \Response::json($response);
}
Routes:路线:
Route::post('/studio/uploadLogo', 'MyController@uploadLogo');
Route::get('/studio/uploadLogo', 'MyController@uploadLogo');
You just change a view js script to submit like below $('.form-horizontal').submit(function(event){ event.preventDefault(); $.ajax({ type : 'POST', url : "/studio/uploadLogo", data : new FormData(this), contentType:false, processData:false, }) .done(function(data,status){ //Your codes here }); }); and echo string response from controller like below ---------------- $file=$request->file('logo'); $uploaded_file_path=''; if($file!=null) { $destinationPath = 'uploads'; $uploaded=$file->move($destinationPath,$file->getClientOriginalName()); $uploaded_file_path= $uploaded->getPathName(); $response = array( 'status' => 'success', 'data' => $uploaded_file_path ); }else{ $response = array( 'status' => 'failed', 'data' => $uploaded_file_path ); } echo json_encode($response); ----------------
Try this in your controller 在您的控制器中尝试
public function uploadLogo() {
$file = Input::file('logo')->getRealPath();
$photoName = str_random(20) . '.' . Input::file('logo')->getClientOriginalExtension();
Input::file('logo')->move(public_path('avatars'), $photoName);
$response = array(
'status' => 'success',
'data' => $photoName
);
return \Response::json($response);
}
You have given 你给了
Input::get('logo')->move(public_path('avatars'), $photoName);
输入:: get('logo')-> move(public_path('avatars'),$ photoName);
Please change it to 请更改为
Input::file('logo')->move(public_path('avatars'), $photoName);
输入::: file('logo')-> move(public_path('avatars'),$ photoName);
and you should submit the form from ajax as like @jalin comment ( https://stackoverflow.com/a/47906201/4049692 ) 并且您应该像@jalin comment( https://stackoverflow.com/a/47906201/4049692 )一样从ajax提交表单。
Hope this should be the issue. 希望这应该是问题。 Thanks!.
谢谢!。
Try adding processData: false, contentType: false
in your script code 尝试在脚本代码中添加
processData: false, contentType: false
$('#imageInput').change(function (e) {
e.preventDefault();
var logo = $('#imageInput').val();
var form_data = new FormData();
form_data.append("logo",$("#imageInput")[0].files[0]);
console.log(logo);
$.ajax({
type: "POST",
url: '/studio/uploadLogo',
data: {form_data},
cache : false,
processData: false,
contentType: false
success: function( data ) {
console.log(data);
}
});
});
And try getting values in controller like $request->logo
并尝试在
$request->logo
类的控制器中获取值
Refer my answer here enter link description here 在这里参考我的答案在这里输入链接描述
add data into FormData instance using 'this' and pass it to the data object in the ajax, also add contentType: false, processData: false使用'this'将数据添加到FormData实例中并将其传递给ajax中的数据object,同时添加contentType:false,processData:false
let formData = new FormData(this);
$.ajax({
type: "POST",
url: "{{ route('auth.societies.store') }}",
contentType: false,
processData: false,
});
then it will upload the form images然后它将上传表格图像
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.