Question

所以我使用dropzone.js，我想在dropzone成功事件后重新加载特定的图像。

我的控制器

public function edit($id)
{
    $offer = Offer::find($id);

    if(!is_object($offer->getMedia('featimgs')->first())){
        $offerfeatimg = '/assets/images/offerfeatimg.jpg';
    } else {
        $offerfeatimg = $offer->getMedia('featimgs')->first()->getUrl('medium');
    }

    return view('admin.offers.edit')->with(compact('offer', 'offerfeatimg'));
}

所以这就是我将图像传递给视图的地方：

<div class="panel-body">
            <img src="{{ $offerfeatimg }}" class="img-responsive">
            @if($offerfeatimg != '/assets/images/offerfeatimg.jpg')
            <div class="removebutton">
                <a href="/admin/offer/featimg/delete/{{ $offer->id }}" class="btn btn-danger" role="button">Izbrisi sliku</a>
            </div>
            @endif
            <form action="/admin/offer/featimg/{{ $offer->id }}" class="dropzone" id="my-awesome-dropzone">
                {!! csrf_field() !!}
                <div class="dz-message">Prebacite glavnu sliku za ovu ponudu</div>
            </form>

        </div>

观点：

所以我想在成功dropzone事件后通过ajax重新加载这部分：

<img src="{{ $offerfeatimg }}" class="img-responsive">
            @if($offerfeatimg != '/assets/images/offerfeatimg.jpg')
            <div class="removebutton">
                <a href="/admin/offer/featimg/delete/{{ $offer->id }}" class="btn btn-danger" role="button">Izbrisi sliku</a>
            </div>
            @endif

有什么想法吗？

Answer 1

这是假设您的javascript设置，包括jquery。如果表单节点上的dropzone对象可用，您应该可以在javascript中执行类似的操作：

var dz = $('form.dropzone').get(0).dropzone;

dz.on("success", function (file, response) {
  var imageSrc = ... // add logic here to determine src from server response
  $(".img-responsive").attr('src', imageSrc);
  if(imageSrc != '/assets/images/offerfeatimg.jpg') {
    $(".removebutton").hide();
  }
  else {
    // you may need to edit your html so that this button exists in order to show it
    $(".removebutton").show();
  }
});

或者你可以像这样设置事件处理程序：

Dropzone.options.myAwesomeDropzone = {
  ... other options ...,
  success: function () {
    ...
  }
};

了解处理dropzone事件：http://www.dropzonejs.com/#events

dropzone成功事件后的Ajax图像加载

1 个答案: