[英]Image upload not working through ajax Laravel
遇到一个奇怪的问题,我确定它与我的脚本获取文件输入字段值的方式有关。
我知道 controller function 有效,因为我已经能够通过手动提交表单而不使用 ajax 来做到这一点。
我也知道 ajax 可以发送和接收请求,因为我通过修改它来测试它来回解析一个有效的字符串。
此外,我可以看到脚本正在抓取文件,就像我 select 文件一样,它在控制台中显示了选定的文件。
在我的浏览器中出现 500 错误,在 Laravel 中我只得到这个:
Symfony\Component\Debug\Exception\FatalThrowableError:调用成员 function getClientOriginalExtension() on string in C:\123\app\Http\Controllers\MyController.php:156
我尝试更新 controller 以使用 Request->logo 代替,但没有成功。
看法:
<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>
脚本:
$('#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:
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);
}
路线:
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); ----------------
在您的控制器中尝试
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);
}
你给了
输入:: get('logo')-> move(public_path('avatars'),$ photoName);
请更改为
输入::: file('logo')-> move(public_path('avatars'),$ photoName);
并且您应该像@jalin comment( https://stackoverflow.com/a/47906201/4049692 )一样从ajax提交表单。
希望这应该是问题。 谢谢!。
尝试在脚本代码中添加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);
}
});
});
并尝试在$request->logo
类的控制器中获取值
在这里参考我的答案在这里输入链接描述
使用'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,
});
然后它将上传表格图像
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.