如果找不到图像，如何从 Dropzone.js 显示上传框 |拉拉维尔 5.2答案

【问题标题】：How to show upload box from Dropzone.js if no image is found | Laravel 5.2如果找不到图像，如何从 Dropzone.js 显示上传框 |拉拉维尔 5.2
【发布时间】：2016-05-02 07:08:35
【问题描述】：

我的个人资料上传有问题。我正在使用 laravel 5.2，我使用 Dropzone.js 插件上传用户个人资料照片。我的问题是当我上传个人资料照片时，我将其设置为 maxFilesize 1。所以它一次只上传 1 张照片。但是，上传完成后，用户可以返回并再上传一张照片，因此用户将有 2 张照片作为他们的个人资料照片。

如果用户已经有个人资料照片，我需要这样做，所以 dropzone 上传框不会显示，直到该个人资料照片被删除或没有任何照片。 Dropzone 上传框如下所示：

这是我的 Dropezone.js 脚本：

<script>
                Dropzone.options.addPhotosForm = {
                     paramName: 'photo',
                     maxFilesize: 2,
                     acceptedFiles: '.jpg, .jpeg, .png, .bmp',
                     maxFiles: 1,
                        // Refresh page when upload is complete.
                        init: function () {
                                this.on("queuecomplete", function (file) {
                                         if (this.getUploadingFiles().length === 0 && this.getQueuedFiles().length === 0) {
                                            location.reload();
                                         }
                                });
                        }
                }
        </script>

照片的显示方式如下：

@foreach ($user->photos as $photo)
         <form method="post" action="{{ route('profile.destroy', ['id' => $photo->id]) }}" enctype="multipart/form-data">
             {!! csrf_field() !!}
             <input type="hidden" name="_method" value="DELETE">
             <button type="submit" class="close">&times;</button>
             <img class="ui small circular image" src="/travels/{{ $photo->thumbnail_path }}" alt="" data-id="{{ $photo->id }}">
         </form>
@endforeach

这是我的文件上传表单：

<form 
    action="/travels/{{ $user->username }}/photos" 
    method="post" 
    class="dropzone" 
    id="addPhotosForm" 
    enctype="multipart/form-data">
        {{ csrf_field() }}
</form>

这是我不想要的带有 2 张或更多个人资料照片的结果

【问题讨论】：

标签： javascript php jquery dropzone.js laravel-5.2

【解决方案1】：

我用 3 条 jQuery 代码解决了这个问题

if($('#image').length){
     $('#FormUpload').hide();
}

如果有，我将#image 添加到实际图像中并将#Formupload添加到实际的表单上传框，并检查图像是否出现在页面上然后隐藏上传框

【讨论】：