[英]Laravel Ajax image upload with preview not working?
The form for uploading the image using Laravel Form Facade 使用Laravel Form Facade上传图像的表单
{{Form:: open(['route'=>'jcrop.store', 'method'=>'post','id'=>'upload','role'=>'form-role', 'enctype'=>'multipart/form-data'])}}
@include('backend.admin.jcrop.general._form',['submitButton'=>'Save Values'])
{{Form:: close()}}
The form which is included... 包含的表格......
<div class="form-group">
{{Form:: label('title','Title')}}
{{Form:: text('title',null,['placeholder'=>'Enter Title', 'class'=>'form-control'])}}
</div>
<div class="form-group">
{{Form:: label('rank','Rank')}}
{{Form:: number('rank',null,['placeholder'=>'Enter Rank', 'class'=>'form-control'])}}
</div>
<div class="form-group">
{{Form:: label('image','Image')}}
{{Form:: file('image',null,['placeholder'=>'Enter Rank', 'class'=>'form-control', 'id'=> 'image'])}}
</div>
<div class="form-group">
{{Form:: label('status','Status:')}}
{!! Form::radio('status', '1', 'true')!!} Active
{!! Form::radio('status', '0')!!} De-Active
</div>
{{Form:: button($submitButton,['class'=>'btn btn-primary','type'=>'submit'])}}
{{Form:: button('Reset',['class'=>'btn btn-danger','name'=>'reset','type'=>'reset'])}}
The script which uploads image using malsupform plugin. 使用malsupform插件上传图像的脚本。
<script type="text/javascript">
$("document").ready(function(){
var options= {
beforeSubmit: showRequest,
success: showResponse,
dataType: 'json'
};
$("#image").change(function(){
$("#upload").ajaxForm(options).submit();
});
});
function showRequest(formData, jqForm, options){
$("#validation-errors").hide().empty();
return true;
}
function showResponse(response, statusText, xhr, $form){
if(response.success==false)
{
var arr= response.errors;
$.each(arr, function(index, value){
if(value.length=!0){
$("#validation-errors").append('<div class="alert alert-danger">+value+</div');
}
});
$("#validation-errors").show();
}else{
console.log(response.file);
$("#output").html("<img src='"+response.file+"'/>");
}
}
</script>
The routes to handle the upload and store methods. 处理上传和存储方法的路由。
Route::resource('jcrop', 'Admin\JcropController');
The Controller which handles the upload and returns the json format of the data. Controller处理上传并返回数据的json格式。
This is the Controller file in which I have declared some protected variable. 这是我已经声明了一些受保护变量的Controller文件。
protected $view_path = 'backend.admin.jcrop';
protected $imagePath = '\public\uploads\jcrop';
protected $imageUrl = 'uploads\jcrop';
The Controller Function which handles the upload and the returns the json format of the data.. Controller函数处理上传并返回数据的json格式。
public function store(Request $request)
{
if($request->hasFile('image')){
$image= $this->saveImage($request->file('image'));
Here I have made a simple function called saveImage() which uploads the image and returns the uploaded file 在这里,我创建了一个名为saveImage()的简单函数,它上传图像并返回上传的文件
$file= base_path(). $this->imagePath.'/' .$image->getFileName();
if($image){
return response()->json(['success'=>'true', 'file'=>$file]);
}
}
}
The function which handles the upload is... 处理上传的功能是......
protected function saveImage($image)
{
$filename= $image->getClientOriginalName();
$filename= pathinfo($filename, PATHINFO_FILENAME);
$file= $filename. '.' .$image->getClientOriginalExtension();
$upload= $image->move(base_path().$this->imagePath, $file);
return $upload;
}
Everything is working fine except when the data is returned i see 一切正常,除非我看到数据返回
Not allowed to load local resource:
In chrome and FireFox as well. 在chrome和FireFox中也是如此。 Please help me sort out the problem?
请帮我解决问题?
I think the issue is with the saveImage()
return. 我认为问题在于
saveImage()
返回。 Instead of base_path()
, try using url('/')
. 而不是
base_path()
,尝试使用url('/')
。 base_path()
returns server path not the URL. base_path()
返回服务器路径而不是URL。
$file= url('public/uploads/jcrop').$image->getFileName();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.