使用ajax 500上传Laravel图像内部服务器错误
我试图在Laravel5.2中使用ajax上传图像,但仍然遇到错误500内部服务器错误。 当我尝试使用ajax请求上传图像时,浏览器显示了正确的路径,但我仍然不明白为什么它仍然向我显示错误 HTML使用ajax 500上传Laravel图像内部服务器错误,ajax,image,laravel,file-upload,Ajax,Image,Laravel,File Upload,我试图在Laravel5.2中使用ajax上传图像,但仍然遇到错误500内部服务器错误。 当我尝试使用ajax请求上传图像时,浏览器显示了正确的路径,但我仍然不明白为什么它仍然向我显示错误 HTML <!-- CHANGE AVATAR TAB --> <div class="tab-pane" id="tab_1_2"> <div class="uploadi
<!-- CHANGE AVATAR TAB -->
<div class="tab-pane" id="tab_1_2">
<div class="uploadimagediv"></div>
{{ Form::open(array('url' => 'admin/avatar','method'=>'post','files'=>'true','id'=>'updateprofileimage')) }}
<div class="form-group">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" alt=""/>
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;">
</div>
<div>
<span class="btn default btn-file">
<span class="fileinput-new">
Select image </span>
<span class="fileinput-exists">
Change </span>
<p class="text-danger" id="error_image"></p>
<input type="file" id="picture" name="picture"/>
{{--{{ Form::file('picture') }}--}}
</span>
<span class="error alert-danger">{{ $errors->first('picture') }}</span>
<a href="javascript:;" class="btn default fileinput-exists" data-dismiss="fileinput">
Remove </a>
</div>
</div>
<div class="clearfix margin-top-10">
</div>
</div>
<div class="margin-top-10">
{{Form::hidden('id', 2, ["id"=>"id"])}}
{{ Form::button('Upload',['id'=> 'updatepicture','class'=>'btn green-haze']) }}
{{--{{ Form::submit('Submit',['class' => 'btn green-haze','name'=>'changeImage']) }}--}}
<a href="javascript:;" class="btn default">
Cancel </a>
</div>
{{ Form::close() }}
</div>
<!-- END CHANGE AVATAR TAB -->
Ajax
$(document).on('click', '#updatepicture', function($e)
{
$e.preventDefault();
// send an ajax request
$("#error_image").empty();
$.ajax(
{
url: 'avatar',
processData: false,
contentType: false,
type: "post",//use for update
data: new FormData($("#updateprofileimage")[0]),
success: function(data)
{
if(data.status)
{
$("#uploadimagediv").html('<div class="alert alert-success"><button type="button" class="close">×</button>'+data.message+'</div>');
window.setTimeout(function()
{
$(".alert").fadeTo(500, 0).slideUp(500, function()
{
$(this).remove();
});
}, 5000);
$('.alert .close').on("click", function(e)
{
$(this).parent().fadeTo(500, 0).slideUp(500);
});
//console.log(data);
//$("#updateprofileimage")[0].reset();
//window.location.href = "http://localhost/laravel/admin/profile";
}
else
{
errors = data.errors;
for(error in errors)
{
$("#error_"+error.title).html(error.message);
}
}
},
error: function(xhr)
{
if(xhr.status == 422)
{
errors = xhr.responseJSON;
for(error in errors)
{
$("#error_"+error).html(errors[error][0]);
}
}
}
});
});
将下面的行添加到
并在javascript函数中的ajax调用之前添加以下行
$.ajaxSetup({
标题:{
'X-CSRF-TOKEN':$('meta[name=“CSRF-TOKEN”]).attr('content'))
}
});
别忘了授予存储文件夹权限
sudo chmod-R 777存储
将下面的一行添加到
并在javascript函数中的ajax调用之前添加以下行
$.ajaxSetup({
标题:{
'X-CSRF-TOKEN':$('meta[name=“CSRF-TOKEN”]).attr('content'))
}
});
别忘了授予存储文件夹权限
sudo chmod-R 777存储
在ajax设置中,您必须为请求提供x-csrf-token。对于ajax请求,您的url也存在问题:
$(document).on('click', '#updatepicture', function($e)
{
$e.preventDefault();
// send an ajax request
$("#error_image").empty();
$.ajax(
{
url: "{{url('avatar')}}",
processData: false,
contentType: false,
type: "post",//use for update
data: new FormData($("#updateprofileimage")[0]),
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
success: function(data)
{
if(data.status)
{
$("#uploadimagediv").html('<div class="alert alert-success"><button type="button" class="close">×</button>'+data.message+'</div>');
window.setTimeout(function()
{
$(".alert").fadeTo(500, 0).slideUp(500, function()
{
$(this).remove();
});
}, 5000);
$('.alert .close').on("click", function(e)
{
$(this).parent().fadeTo(500, 0).slideUp(500);
});
//console.log(data);
//$("#updateprofileimage")[0].reset();
//window.location.href = "http://localhost/laravel/admin/profile";
}
else
{
errors = data.errors;
for(error in errors)
{
$("#error_"+error.title).html(error.message);
}
}
},
error: function(xhr)
{
if(xhr.status == 422)
{
errors = xhr.responseJSON;
for(error in errors)
{
$("#error_"+error).html(errors[error][0]);
}
}
}
});
});
$(文档).on('click','updatepicture',函数($e)
{
$e.preventDefault();
//发送ajax请求
$(“#错误_图像”).empty();
$.ajax(
{
url:“{url('avatar')}}”,
processData:false,
contentType:false,
类型:“post”,//用于更新
数据:新FormData($(“#updateprofileimage”)[0]),
标题:{
'X-CSRF-TOKEN':“{{CSRF_TOKEN()}”
},
成功:功能(数据)
{
if(数据状态)
{
$(“#uploadimagediv”).html(“×”+data.message+”);
setTimeout(函数()
{
$(“.alert”).fadeTo(500,0).slideUp(500,function()
{
$(this.remove();
});
}, 5000);
$('.alert.close')。打开(“单击”,函数(e)
{
$(this.parent().fadeTo(500,0).slideUp(500);
});
//控制台日志(数据);
//$(“#updateprofileimage”)[0]。重置();
//window.location.href=”http://localhost/laravel/admin/profile";
}
其他的
{
错误=数据错误;
for(错误中的错误)
{
$(#error#+error.title).html(error.message);
}
}
},
错误:函数(xhr)
{
如果(xhr.status==422)
{
errors=xhr.responseJSON;
for(错误中的错误)
{
$(“#error"+error).html(errors[error][0]);
}
}
}
});
});
在ajax设置中,您必须为请求提供x-csrf-token。对于ajax请求,您的url也存在问题:
$(document).on('click', '#updatepicture', function($e)
{
$e.preventDefault();
// send an ajax request
$("#error_image").empty();
$.ajax(
{
url: "{{url('avatar')}}",
processData: false,
contentType: false,
type: "post",//use for update
data: new FormData($("#updateprofileimage")[0]),
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
success: function(data)
{
if(data.status)
{
$("#uploadimagediv").html('<div class="alert alert-success"><button type="button" class="close">×</button>'+data.message+'</div>');
window.setTimeout(function()
{
$(".alert").fadeTo(500, 0).slideUp(500, function()
{
$(this).remove();
});
}, 5000);
$('.alert .close').on("click", function(e)
{
$(this).parent().fadeTo(500, 0).slideUp(500);
});
//console.log(data);
//$("#updateprofileimage")[0].reset();
//window.location.href = "http://localhost/laravel/admin/profile";
}
else
{
errors = data.errors;
for(error in errors)
{
$("#error_"+error.title).html(error.message);
}
}
},
error: function(xhr)
{
if(xhr.status == 422)
{
errors = xhr.responseJSON;
for(error in errors)
{
$("#error_"+error).html(errors[error][0]);
}
}
}
});
});
$(文档).on('click','updatepicture',函数($e)
{
$e.preventDefault();
//发送ajax请求
$(“#错误_图像”).empty();
$.ajax(
{
url:“{url('avatar')}}”,
processData:false,
contentType:false,
类型:“post”,//用于更新
数据:新FormData($(“#updateprofileimage”)[0]),
标题:{
'X-CSRF-TOKEN':“{{CSRF_TOKEN()}”
},
成功:功能(数据)
{
if(数据状态)
{
$(“#uploadimagediv”).html(“×”+data.message+”);
setTimeout(函数()
{
$(“.alert”).fadeTo(500,0).slideUp(500,function()
{
$(this.remove();
});
}, 5000);
$('.alert.close')。打开(“单击”,函数(e)
{
$(this.parent().fadeTo(500,0).slideUp(500);
});
//控制台日志(数据);
//$(“#updateprofileimage”)[0]。重置();
//window.location.href=”http://localhost/laravel/admin/profile";
}
其他的
{
错误=数据错误;
for(错误中的错误)
{
$(#error#+error.title).html(error.message);
}
}
},
错误:函数(xhr)
{
如果(xhr.status==422)
{
errors=xhr.responseJSON;
for(错误中的错误)
{
$(“#error"+error).html(errors[error][0]);
}
}
}
});
});
我仍然收到错误“NetworkError:500内部服务器错误”-看起来您没有正确地将路由放入ajax url中,$.ajax附近({url:'avatar',它必须是url:{{route('name')}}}我仍然收到错误“NetworkError:500内部服务器错误-”看起来您没有正确地将路由放在ajax url中,靠近$.ajax({url:'avatar',它必须是url:{{route('name')}}}}'我仍然收到错误“NetworkError:500内部服务器错误-”我仍然收到错误“NetworkError:500内部服务器错误-”
Add the below line inside <head>
<meta name="csrf-token" content="{{ csrf_token() }}">
And add the below lines before your ajax call in javascript function
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
And don't forget to give permission to your storage folder
sudo chmod -R 777 storage
$(document).on('click', '#updatepicture', function($e)
{
$e.preventDefault();
// send an ajax request
$("#error_image").empty();
$.ajax(
{
url: "{{url('avatar')}}",
processData: false,
contentType: false,
type: "post",//use for update
data: new FormData($("#updateprofileimage")[0]),
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
success: function(data)
{
if(data.status)
{
$("#uploadimagediv").html('<div class="alert alert-success"><button type="button" class="close">×</button>'+data.message+'</div>');
window.setTimeout(function()
{
$(".alert").fadeTo(500, 0).slideUp(500, function()
{
$(this).remove();
});
}, 5000);
$('.alert .close').on("click", function(e)
{
$(this).parent().fadeTo(500, 0).slideUp(500);
});
//console.log(data);
//$("#updateprofileimage")[0].reset();
//window.location.href = "http://localhost/laravel/admin/profile";
}
else
{
errors = data.errors;
for(error in errors)
{
$("#error_"+error.title).html(error.message);
}
}
},
error: function(xhr)
{
if(xhr.status == 422)
{
errors = xhr.responseJSON;
for(error in errors)
{
$("#error_"+error).html(errors[error][0]);
}
}
}
});
});