Laravel Ajax图片上传,预览不起作用?

时间:2016-11-20 07:55:45

标签: javascript ajax laravel image-uploading malsup-ajax-form

使用Laravel Form Facade上传图像的表格

You are in the method
You are in the block
You are again back to the method
You are in the block

包含的表格......

{{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()}}

使用malsupform插件上传图片的脚本。

<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'])}}

处理上传和存储方法的路线。

<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>

Controller处理上传并返回数据的json格式。

这是我声明了一些受保护变量的Controller文件。

Route::resource('jcrop', 'Admin\JcropController');

Controller Function处理上传并返回数据的json格式..

protected $view_path    = 'backend.admin.jcrop';
protected $imagePath    = '\public\uploads\jcrop';
protected $imageUrl     = 'uploads\jcrop';

这里我创建了一个名为saveImage()的简单函数,它上传图像并返回上传的文件

public function store(Request $request)
    {
      if($request->hasFile('image')){
            $image= $this->saveImage($request->file('image'));

处理上传的功能是......

            $file= base_path(). $this->imagePath.'/' .$image->getFileName();
            if($image){
                return response()->json(['success'=>'true', 'file'=>$file]);
        }
      }
         }

除非返回数据,否则一切正常。

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;
    }

在chrome和FireFox中也是如此。请帮我解决问题?

1 个答案:

答案 0 :(得分:1)

我认为问题在于saveImage()返回。而不是base_path(),请尝试使用url('/')base_path()返回服务器路径而不是URL。

$file= url('public/uploads/jcrop').$image->getFileName();