javascript 前刀落料区laravel不工作

sd2nnvve 于 2023-01-11 发布在 Java

关注(0)|答案(1)|浏览(116)

我有foreach循环的产品产品在篮子里可以得到许多照片从用户用户上传照片到产品（出售农场的照片）模态是在foreach循环
当模态是打开dropzone不工作，并得到这个错误：
服务器错误：1放置区已连接。
我的模态

<div class="modal fade"  id="productmultiplephoto-{{$product->pivot->id}}" role="dialog" aria-labelledby="productmultiplephoto" aria-hidden="true">
<div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-header pb-0">
            <h5 class="modal-title" id="price-changes-modal-label"></h5>
            <button type="button" class="close" data-dismiss="modal"
                    aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">

               <div class="__img">
                   <div class="form-group">
                       <input type="hidden" name="original_name[]" id="product-photo">
                       <input name="product_id"  value="{{$product->id}}" type="hidden"  id="product_id" >
                       <input name="product_pivot"  value="{{$product->pivot->id}}" type="hidden"  id="product_pivot" >
                       <input name="cartproduct_id"   type="hidden"  id="cartproduct_id"value="{{$product->pivot->id}}" >

                       <label for="photog">upload</label>
                       <input type="hidden" name="original_name[]" id="product-photo">
                       <div id="photog" class="dropzone" ></div>
                   </div>
               </div>

        </div>
    </div>
</div>

我的剧本

<script>
    Dropzone.autoDiscover = false;

    var photosGallery = []
    var drop = new Dropzone('#photog', {
        addRemoveLinks: true,
        url: "{{ route('front.photouser.upload') }}",
        type:"POST",

        sending: function(file, xhr, formData){
            formData.append("_token","{{csrf_token()}}")
            formData.append("product_id", document.getElementById('product_id').value);
            formData.append("product_pivot", document.getElementById('product_pivot').value);
            formData.append("cartproduct_id", document.getElementById('cartproduct_id').value);
        },
        success: function(file, response){
            photosGallery.push(response.original_name)
            if (response['level'] == 1) {
                $('.level1_message').html(response['message']);

            }
        }
    });
    productGallery = function(){
        document.getElementById('product-photo').value = photosGallery
    }

</script>

我的按钮模态

@foreach($cart->products as $product)
     <button  type="button" data-toggle="modal" data-target="#productmultiplephoto-{{$product->pivot->id}}" class="btn-primary-multiple btn-primary-cm btn-with-icon">
    <i class="mdi mdi-plus-box-multiple"></i>
        upload
    </button>
   @endforeach

包含模态部分

@include('front::products.partials.add-multiple-photo')

JavaScript

来源：https://stackoverflow.com/questions/75069473/dropzone-in-foreach-blade-laravel-not-working

1条答案

按热度按时间

0g0grzrc1#

像这样更新你的div：

<div class="photog dropzone"></div>

对于循环的每次迭代，您还应该为每个产品生成一个具有唯一name属性的新隐藏input元素，以便在上载文件时，可以知道该文件要添加到哪个产品

<input type="hidden" name="product_id_{{$product->pivot->id}}" id="product_id" value="{{$product->id}}">

完整JS：

<script>
document.addEventListener("DOMContentLoaded", function() {
    var photosGallery = [];
    Dropzone.autoDiscover = false;
    var dropzones = [];


    let modals = document.querySelectorAll('.dropzone-modal');
    modals.forEach((modal, index) => {
        let photog = modal.querySelector('.photog');
        let drop = new Dropzone(photog, {
            addRemoveLinks: true,
            url: "{{ route('front.photouser.upload') }}",
            type: "POST",
            sending: function(file, xhr, formData) {
                formData.append("_token", "{{csrf_token()}}")
                let product_id = modal.querySelector(`input[name='product_id']`);
                let product_pivot = modal.querySelector(`input[name='product_pivot']`);
                let cartproduct_id = modal.querySelector(`input[name='cartproduct_id']`);
                formData.append("product_id", product_id.value);
                formData.append("product_pivot", product_pivot.value);
                formData.append("cartproduct_id", cartproduct_id.value);
            },
            success: function(file, response) {
                photosGallery.push(response.original_name)
                if (response['level'] == 1) {
                    $('.level1_message').html(response['message']);
                }
            }
        });
        dropzones.push(drop);
    });

    let modalButtons = document.querySelectorAll('.btn-primary-multiple');
    modalButtons.forEach((button, index) => {
        button.addEventListener("click", () => {
            dropzones[index].removeAllFiles();
        });
    });

    productGallery = function() {
        document.getElementById('product-photo').value = photosGallery
    }

});
</script>

像这样更新你的模态div：

<div class="modal fade dropzone-modal"  id="productmultiplephoto-{{$product->pivot->id}}" role="dialog" aria-labelledby="productmultiplephoto" aria-hidden="true">

赞(0）回复(0）举报 2023-01-11

我来回答

javascript 前刀落料区laravel不工作

1条答案

相关问题

热门标签

最新问答