所以我使用的是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
有什么想法吗？
这是假设您的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.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();
}
};