dropzone成功事件後的Ajax圖像加載

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> 

的觀點：

所以我希望以後重新加載通過AJAX這部分成功dropzone事件：

<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

Dropzone.options.myAwesomeDropzone = { 

      paramName: "file", // The name that will be used to transfer the file 
      maxFilesize: 2, // MB 
      parallelUploads: 1, 
      success: function (file, response) { 
       var imageSrc = response; 
       $(".img-responsive").attr('src', imageSrc); 
       if(imageSrc == '/assets/images/offerfeatimg.jpg') { 
        $(".removebutton").hide(); 
       } else { 
        $(".removebutton").show(); 
       } 

       this.removeAllFiles(); 
      } 
     }; 

Answer 2

這是假設一下你的JavaScript設置，包括jQuery。如果懸浮窗對象是可用的形式節點上，你應該能夠做這樣的事情在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