不同索引的多个文件上传问题

Question

我的 jquery 代码有问题

我正在动态添加多个 <input type='file' multiple> 其中每个名称参数都是更改意味着第一个是

color_images_1 <input type='file' multiple name='color_images_1'>

并且会动态增加这个 1 好吧，所以每种颜色都有自己颜色的多个图像。

所以基本上我想实现这个并且我正在使用 jS new FormData 所以这是我的问题我将多个文件附加到 formdata。

$(function() {

    let $i = 1;
    $(document).on('click', '.btn_color', function() {
        $i++;
        $('.color_wrapper').append("<div class='form-group'><label for='color_name" + $i + "'>Color Name</label><input type='text' name='color_name" + $i + "' id='color_name" + $i + "' class='form-control'></div><div class='form-group'><label for='sku" + $i + "'>Sku</label><input type=text class='form-control' id='sku" + $i + "' name='sku" + $i + "'></div><div class='form-group'><button type='button' class='btn btn-link pull-right btn_color'>Add more colors</button><label for='color_images" + $i + "'>Color Images</label><input type='file' name='color_images" + $i + "' multiple id='color_images" + $i + "' class='form-control'></div>");
    });
    $("#product_form").on('submit', function(e) {
        e.preventDefault();
        let files = '';
        let form = document.getElementById('product_form');
        let formData = new FormData(form);
        files = $("#color_images" + $i).get(0).files;
        $(files).each(function(index, file){
            formData.append("color_images_" + [$i],file);
        });
        formData.append('variable', $i);
        $.ajax({
            url: 'product_ajax.php',
            method: 'post',
            data: formData,
            success: function(data) {
                console.log(data);
            },
            contentType: false,
            cache: false,
            processData: false
        });
    });

});

现在如果我给出索引我只会得到一个文件所以我会得到多个文件否则不会

[color_images_1] => Array
    (
        [name] => dht_feed.dat
        [type] => application/octet-stream
        [tmp_name] => D:\xampp\tmp\php4E11.tmp
        [error] => 0
        [size] => 2
    )

)

我想要的

color_images_1 its all multiple files

color_images_2 its all multiple files

html代码：

                                   <form id="product_form" method="post" enctype="multipart/form-data">
                                <div class="form-group">
                                    <label for="product_name">Product Name</label>
                                    <input type="text" class="form-control" name="product_name" id="product_name">
                                </div>
                                <div class="form-group">
                                    <label for="product_slug">Product Slug</label>
                                    <input type="text" class="form-control" name="product_slug" id="product_slug">
                                </div>
                                <div class="form-group">
                                    <label for="product_price">Product Price</label>
                                    <input type="text" class="form-control" name="product_price" id="product_price">
                                </div>
                                <div class="form-group">
                                    <label for="product_description">Product Description</label>
                                    <textarea class="form-control" name="product_description" id="product_description"></textarea>
                                </div>
                                <div class="form-group">
                                    <label for="color_name1">Color Name</label>
                                    <input type="text" name="color_name1" id="color_name1" class="form-control">
                                </div>
                                <div class="form-group">
                                    <label for="sku1">Stock Keeping Unit</label>
                                    <input type="text" name="sku1" id="sku1" class="form-control">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-link pull-right btn_color" type="button">Add more colors</button>
                                    <label for="color_images1">Color Images</label>
                                    <input type="file" name="color_images1" multiple id="color_images1" class="form-control">
                                </div>
                                <div class="color_wrapper">
                                </div>

                                <button class="btn btn-primary btn-block" type="submit">Add Product</button>
                            </form>

Answer 1

您还需要迭代 i。

请替换以下代码

    files = $("#color_images" + $i).get(0).files;
    $(files).each(function(index, file){
        formData.append("color_images_" + [$i],file);
    });
    formData.append('variable', $i);

有了这个

   for (var j = 1; j <= $i; j++) {
     files = $("#color_images" + j).get(0).files;
     $(files).each(function(index, file) {
       formData.append("color_images_" + [j], file);
     });
     formData.append("variable", j);
   }

不同索引的多个文件上传问题

Multiple fileUpload Problem for different indexes

javascript

php

jquery

multipartform-data

form-data