Question

我正在使用此代码上传文件：

<form>
<script src="/static/js/vendor/jquery.ui.widget.js"></script>
<script src="/static/js/jquery.iframe-transport.js"></script>
<script src="/static/js/jquery.fileupload.js"></script>

<p>
    <input id="fileupload" type="file" name="files[]" data-url="/upload-files/" multiple="multiple">
</p>

<p>
    <button id="upload-images-button" class="upload-images btn btn-success btn-large">Add images</button>
</p>
</form>

<script>

$(document).ready(function() {
    $('.upload-images').click(function() {
        $('#fileupload').trigger('click');
    });
});

$(function () {
    $('#fileupload').fileupload({
        autoUpload: true,
        dataType: 'json',
        done: function (e, data) {
            alert('uploaded');
        }
    });
});

</script>

点击#fileupload可以正常工作：它会打开浏览器文件选择窗口，一旦我选择了一个文件，它就会向data-url发出请求并触发alert('uploaded')。

但是点击#upload-images-button不起作用：它会打开浏览器文件选择窗口，但在我选择文件后，没有任何反应。

Answer 1

我终于明白了。 btnSendFeedback充当了提交按钮 - 因此它不是触发<button>，而是尝试提交表单。将fileupload()添加到type="button"可以通过使按钮的行为像普通按钮一样解决它。

Answer 2

如果其他人正在寻找此

来自此处的维基文档：https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-One-Form

以下是关于如何向示例添加其他文件输入字段的简短说明：在index.html中，使用类“fileinput-button”复制span标记，如下所示：

<form id="fileupload" action="php/index.php" method="POST" enctype="multipart/form-data">
<div class="row">
    <div class="span16 fileupload-buttonbar">
        <div class="progressbar fileupload-progressbar"><div style="width:0%;"></div></div>
        <span class="btn success fileinput-button">
            <span>Add files...</span>
            <input type="file" name="files[]" multiple>
        </span>
        <!-- Extra file input start /-->
        <span class="btn fileinput-button">
            <span>Other...</span>
            <input type="file" name="files2[]" multiple>
        </span>
        <!--/ Extra file input stop -->
        <button type="submit" class="btn primary start">Start upload</button>
        <button type="reset" class="btn info cancel">Cancel upload</button>
        <button type="button" class="btn danger delete">Delete selected</button>
        <input type="checkbox" class="toggle">
    </div>
</div>
<br>
<div class="row">
    <div class="span16">
        <table class="zebra-striped"><tbody class="files"></tbody></table>
    </div>
</div>

因此使用 fileinput-button 类帮助了我。

Answer 3

这个问题可能是重复的 Jquery File upload

但要回答你的问题，你可以这样做：

$(function () {
    $('#fileupload').fileupload({
        autoUpload: true,
        dataType: 'json',
        add: function (e, data) {            
            $(".upload-images").unbind('click').on('click', function() {
                data.submit();
            });
        },
        done: function (e, data) {
             alert('uploaded');
        }
    });
});

这样做可以防止双重发布

jQuery文件上传未触发上传

3 个答案: