Question

我的jquery代码有问题

我正在动态添加多个<input type='file' multiple>，其中每个name参数都是change表示第一个是

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其所有多个文件

color_images_2及其所有多个文件

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);
   }

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

1 个答案: