无法以相同的形式上传第二张图片

Question

我正在使用 BTootstrap 和 jQuery File Upload Plugin 提交表单，当我在表单中添加第二个元素时，我想提交第二张图片时遇到问题。

注意： Form 启动 jQuery 文件上传插件的 UploadHandler，没有任何编辑。

HTML

<form id="edit-form" method="post" action="save.php" class="form-horizontal" enctype="multipart/form-data">
    <div class="col-sm-12 input-div-body">

        <? if ($saveddata->num_rows !== 0) { ?>
            <? foreach ($saveddata as $data) { ?>
                <!-- form inputs -->
                <div id="form-inputs" class="form-inputs">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Όνομα:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="name[]" value="<?= $data['name'] ?>">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Μέγεθος:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="size[]" value="<?= $data['size'] ?>">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Πέλμα:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="tread[]" value="<?= $data['tread'] ?>">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Διαθέσιμο:</label>
                        <div class="col-sm-8">
                            <input type="text" class="form-control" name="availability[]"
                                   value="<?= $data['availability'] ?>">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">Εικόνα:</label>
                        <div class="col-sm-8">
                            <!-- The fileinput-button span is used to style the file input field as button -->
                            <span class="btn btn-default fileinput-button">
                                            <i class="glyphicon glyphicon-picture"></i>
                                            <span id="files"><?= !empty($data['image']) ? $data['image'] : 'Προσθήκη Εικόνας...' ?></span>
                                <!-- The file input field used as target for the file upload widget -->
                                            <input id="fileupload" type="file" name="files[]" data-url="server/php/"
                                                   multiple>
                                        </span>
                            <!-- The global progress bar -->
                            <div id="progress" class="progress hidden">
                                <div class="progress-bar progress-bar-info progress-bar-striped"></div>
                            </div>
                            <input type="hidden" name="id[]" value="<?= $data['id'] ?>">
                            <input id=image type="hidden" name="image[]" value="<?= $data['image'] ?>">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button id="<?= $data['id'] ?>" type="button" class="btn btn-danger btn-remove">
                                <span class="glyphicon glyphicon-remove"></span> Αφαίρεση
                            </button>
                        </div>
                    </div>
                </div> <!-- /form-inputs -->
                <hr>
            <? }
        } else { ?>
            <!-- form inputs -->
            <div id="form-inputs" class="form-inputs">
                <div class="form-group">
                    <label class="col-sm-2 control-label">Όνομα:</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="name[]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Μέγεθος:</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="size[]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Πέλμα:</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="tread[]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Διαθέσιμο:</label>
                    <div class="col-sm-8">
                        <input type="text" class="form-control" name="availability[]">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label">Εικόνα:</label>
                    <div class="col-sm-8">
                        <!-- The fileinput-button span is used to style the file input field as button -->
                        <span class="btn btn-default fileinput-button">
                                            <i class="glyphicon glyphicon-picture"></i>
                                            <span id="files"><?= !empty($data['image']) ? $data['image'] : 'Προσθήκη Εικόνας...' ?></span>
                            <!-- The file input field used as target for the file upload widget -->
                                            <input id="fileupload" type="file" name="files[]" data-url="server/php/"
                                                   multiple>
                                        </span>
                        <!-- The global progress bar -->
                        <div id="progress" class="progress hidden">
                            <div class="progress-bar progress-bar-info progress-bar-striped"></div>
                        </div>
                        <input type="hidden" name="id[]" value="<?= $data['id'] ?>">
                        <input id=image type="hidden" name="image[]" value="<?= $data['image'] ?>">
                    </div>
                </div>
            </div> <!-- /form-inputs -->
            <hr>
        <? } ?>
    </div> <!-- /input-div-body -->

    <input type="hidden" name="form" value="edit-form">
    <input type="hidden" name="category" value="<?= $category ?>">
    <input type="hidden" name="type" value="<?= $type ?>">

    <div id="form-group-btn" class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button id="btn-add-more" type="button" class="btn btn-success">
                <span class="glyphicon glyphicon-plus"></span> Προσθήκη
            </button>
            <button type="submit" class="btn btn-primary">
                <span class="glyphicon glyphicon-floppy-disk"></span> Αποθήκευση
            </button>
            <a href="#" target="_blank">
                <button type="button" class="btn btn-default">
                    <span class="glyphicon glyphicon-list-alt"></span> Προβολή Σελίδας
                </button>
            </a>
        </div>
    </div>
</form>

<script src="../js/jquery.ui.widget.js"></script>
<!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
<script src="../js/jquery.iframe-transport.js"></script>
<!-- The basic File Upload plugin -->
<script src="../js/jquery.fileupload.js"></script>

<script>
    /*jslint unparam: true */
    /*global window, $ */
    $(function () {
        'use strict';
        // Change this to the location of your server-side upload handler:
        var url = 'server/php/';
        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('#progress').addClass('hidden');
                    $('#files').text(file.name);
                    $('#image').val(file.name);
                });
            },
            progressall: function (e, data) {
                $('#progress').removeClass('hidden');
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
</script>

JAVASCRIPT

/* Save form post functions */
    $('#edit-form').submit(function (event) {
        event.preventDefault();
        $.ajax({
            data: $(this).serialize(),
            type: $(this).attr('method'),
            url: $(this).attr('action'),
            success: function (response) {
                $("#save-alert").removeAttr('hidden');
                if (response == 'success') {
                    $("#save-alert").removeClass('alert-danger')
                        .addClass('alert-success')
                        .html('Αποθήκευση επιτυχής')
                        .scrollTop(300);
                    location.reload(true);
                } else {
                    $("#save-alert").html(response).scrollTop(300);
                }
            }
        });
        return false;
    });

当用户单击 "Add More" 按钮时，将启动以下 js 函数，它会添加表单元素的副本：

$('#btn-add-more').click(function () {
    $(".input-div-body").append('<!-- form inputs --><div id="form-inputs" class="form-inputs"><div class="form-group"><label class="col-sm-2 control-label">Όνομα:</label><div class="col-sm-8"><input type="text" class="form-control" name="name[]"></div></div><div class="form-group"><label class="col-sm-2 control-label">Μέγεθος:</label><div class="col-sm-8"><input type="text" class="form-control" name="size[]"></div></div><div class="form-group"><label class="col-sm-2 control-label">Πέλμα:</label><div class="col-sm-8"><input type="text" class="form-control" name="tread[]"></div></div><div class="form-group"><label class="col-sm-2 control-label">Διαθέσιμο:</label><div class="col-sm-8"><input type="text" class="form-control" name="availability[]"></div></div><div class="form-group"><label class="col-sm-2 control-label">Εικόνα:</label><div class="col-sm-8"><!-- The fileinput-button span is used to style the file input field as button --><span class="btn btn-default fileinput-button"><i class="glyphicon glyphicon-picture"></i><span id="files"> Προσθήκη Εικόνας...</span><!-- The file input field used as target for the file upload widget --><input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple></span><!-- The global progress bar --><div id="progress" class="progress hidden"><div class="progress-bar progress-bar-info progress-bar-striped"></div></div><input type="hidden" name="id[]"><input id=image type="hidden" name="image[]"></div></div></div><!-- /form-inputs --><hr>');
});

我没有收到任何 error_log 或控制台错误。有什么建议吗？

提前致谢

Answer 1

我认为在添加表单元素的副本后，您必须再次运行文件上传脚本

$('#fileupload').fileupload({ ... })

我还建议用 class 文件上传替换 id 文件上传，用 class 替换运行脚本，例如

$('.fileupload').fileupload({ ... })

无法以相同的形式上传第二张图片

Fail to upload second image in same form

jquery

twitter-bootstrap

jquery-file-upload