如何使 JQuery 文件上传插件在未选择文件的情况下工作？答案

【问题标题】：How to make JQuery file upload plugin work with no files selected?如何使 JQuery 文件上传插件在未选择文件的情况下工作？
【发布时间】：2015-08-12 22:54:49
【问题描述】：

我知道有人问过这个问题before，但没有给出令人满意的答案。我正在使用sails.js 开发网站。

我有一个带有一些文本字段以及文件上传选项的表单（为此我使用了 JQuery 文件上传插件）。但是，如果没有选择文件并且只输入文本字段，则提交不会进一步进行。

这是我的 main.js 提交函数：

$(function () {
    'use strict';
var propertyId = document.getElementById("helper").getAttribute("data-name");
var fileCount = 0, fails = 0, successes = 0;
    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        //url: 'server/php/'
        singleFileUploads: false,
        url: '/admin/property/'+propertyId+'/pictures/upload'
    })

这是我的表格：

<form id="fileupload" action="/admin/property/<%=propertyId%>/pictures/upload" method="POST" enctype="multipart/form-data">
        <noscript><input type="hidden" name="redirect" value="https://blueimp.github.io/jQuery-File-Upload/"></noscript>
        <div class="row fileupload-buttonbar">
            <div class="col-lg-7">
                <label>Stage Title:</label>
                    <input class="form-control" type="text"  name="stageTitle"/>
                    <br>
                <label>Start Date:</label>
                    <input class="form-control" type="text" name="startDate"/>
                    <br>
                <label>End Date:</label>
                    <input class="form-control" type="text" name="endDate"/>
                    <br>
                <label>Description:</label>
                    <textarea class="form-control" type="text" name="description"> </textarea>
                    <br>
                <label>Pictures:</label><br>
                    <span class="btn btn-success fileinput-button">
                        <span>Add Images...</span>
                        <input type="file" name="files" id="files" multiple>
                    </span>

                    <button type="reset" class="btn btn-warning cancel">
                        <span>Cancel upload</span>
                    </button>

            <span class="fileupload-process"></span>
            </div>
            <div class="col-lg-5 fileupload-progress fade">
                <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                    <div class="progress-bar progress-bar-success" style="width:0%;"></div>
                </div>
                <div class="progress-extended">&nbsp;</div>
            </div>
            <button type="submit" class="btn btn-primary start">
                    <span>Save</span>
        </div>

        <table id="pictureTable" role="presentation" class="table table-striped"><tbody class="files"></tbody></table>

            </button>
    </form>

如何在没有选择文件的情况下使库工作？另一种选择是进行两个单独的提交，一个用于文本字段，一个用于文件。但这会很混乱，我不喜欢这种方式。任何指导将不胜感激。

【问题讨论】：

等等。为什么？如果此人未选择特定文件或只是跳过上传，您是否要上传特定文件？
如果没有选择文件，我仍然想提交带有其他输入字段的表单。所以基本上，我只想跳过上传，而是用其他输入创建记录。
如果没有人可以帮忙，试试这个 Sails.js 聊天室。 gitter.im/balderdashy/sails
Optional File Upload with Blueimp jquery file upload plugin的可能重复
@fanfavorite 希望你阅读我帖子的第一行。

标签： javascript html sails.js jquery-file-upload jquery-fileupload-rails

【解决方案1】：

只需检查文件是否已设置：

if($('#fileupload').val() != ""){
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        //url: 'server/php/'
        singleFileUploads: false,
        url: '/admin/property/'+propertyId+'/pictures/upload'
    });
}

【讨论】：

【解决方案2】：

我尝试了上述方法，但在实际上传文件时它以某种方式与进度条混淆。

但是我找到了解决办法。

将SingleFileUploads 设置为false 对JQuery 文件上传器没有多大帮助，因为似乎存在here 所讨论的错误。所以我把那件事重新设置为 true。

我将输入分成两种单独的形式——一种用于文本字段输入，另一种用于文件（通过 JQuery 文件上传器）。对于文本字段表单，我保留了一个用户可以单击的可见按钮。对于另一个，我隐藏了按钮。因此，一旦用户单击可见按钮，我只提交文本输入并在后端创建数据库记录（这是使用 AJAX 调用完成的），在 AJAX 调用的 success 字段中，我 .click() 隐藏按钮如果文件数大于 0。这样一来，它甚至不会输入main.js，以防没有文件可以上传。

【讨论】：