jQuery 文件上传未触发上传

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 工作正常：它打开浏览器文件 selection window，一旦我 select 一个文件，它就会向 [=13] 发出请求=] 并触发 alert('uploaded').

但是点击 #upload-images-button 不起作用：它打开浏览器文件 selection window，但是在我 select 一个文件之后，没有任何反应。

Answer 1

这个问题可能重复 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');
        }
    });
});

这样做可以防止重复发布

Answer 2

我终于明白了。 <button> 用作提交按钮，因此它没有触发 fileupload()，而是试图提交表单。添加 type="button" 到 <button> 通过使按钮像普通按钮一样解决它。

Answer 3

如果其他人正在寻找这个

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

The following is a short howto on how to add an additional file input field to the example: In index.html duplicate the span tag with the class "fileinput-button" like this:

<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>

因此使用 文件输入按钮 class 帮助了我。

jQuery 文件上传未触发上传

jQuery File Upload not triggering upload

javascript

browser

jquery

file-upload

image-uploading