禁用Blueimp jQuery文件上传的自动上传功能

Question

我正在使用blueimp的jquery.fileupload插件来使用asp.net上传文件。

我有一个页面，允许用户选择类别（下拉框），标题（上传的文件名-文本框）和文件输入（由插件处理）。

该插件： https://github.com/i-e-b/jQueryFileUpload.Net

JavaScript / jQuery：

 $('#fileup').fileupload({
                    replaceFileInput: false,
                    formData: function (form) {
                        return [{ name: 'dcat', value: $('#ddlCats').val() }, { name: 'title', value: $('#txtTitle').val()}];
                    },
                    dataType: 'json',
                    url: '/_handlers/FileHandler.ashx',
                    add: function (e, data) {
                        var valid = true;
                        var re = /^.+\.((doc)|(xls)|(xlsx)|(docx)|(pdf)|(pts))$/i;
                        $.each(data.files, function (index, file) {
                            if (!re.test(file.name)) {
                                $('#uploaded').html('This file type is not supported');
                                valid = false;
                            }
                        });
                        if (valid)
                            data.submit();
                    },
                    done: function (e, data) {
                        $.each(data.result, function (index, file) {
                            $('#uploaded').html(file);
                        });
                        GetFiles($('#ddlCats').val())
                    },
                    error: function () {
                        alert('An error occured while uploading the document.');
                    }
                });

HTML：

<div id="fUpload">
<span style="font-weight:bold;">Yeni Belge:</span><br />
    <table class="ktoeos">
        <tr>
            <td>Category:</td>
            <td> <select id="ddlCats"></select></td>
        </tr>
        <tr>
            <td>Document Description:</td>
            <td><input type="text" id="txtTitle" /></td>
        </tr>
        <tr>
            <td>Select Document:</td>
            <td><input type="file" name="file" id="fileup" /></td>
        </tr>
        <tr>
           <td colspan="2"><input type="submit" id="btnSubmit" value="Upload" /></td>
        </tr>
    </table>
    <div id="uploaded"></div>

我的问题是，选择一个文件后，文件就会通过一个http处理程序直接上传。我可以处理提交其他表单数据，但我想在按钮提交时触发此事件，因为我需要进行一些验证。此外，用户可能想先选择一个文件，然后再填写表单的其他部分，在这种情况下，他/她无法这样做，因为在他/她完成之前表单已经被提交了。

由于我不是很擅长javascript编程，我不知道插件可用的.js文件中是否已经提供了此功能（可能已经有了）。你们有什么想法需要我更改或做什么吗？

- Subliminal Hash

Answer 1

add回调函数在文件添加到小部件中时立即被调用，因此您需要重写它以暂停上传，然后通过点击按钮启动上传。

add: function (e, data) {
    $("#btnSubmit").click(function () {
        // validate file...
        if(valid)
            data.submit();
    });
}

更新：现在文档有一个更好的示例：

- Walter

---

正是我要找的。唯一的问题是文本框没有显示文件路径。 - ffffff01

Answer 2

由于在jquery.fileupload-ui.js中有一个默认为"autoUpload: true"的选项，因此这很容易实现。

如果您将其更改为false，则可以在按钮单击事件上手动编写代码。

- coder

---

@Emin-请前往 https://github.com/blueimp/jQuery-File-Upload/downloads 页面下载最新版本。在解决方案管理器中打开该页面，然后导航到js文件夹，在其中找到jquery.fileupload-ui.js文件并搜索autoupload选项，将其从'true'更改为'false'。如果您想使用Bootstrapper，则应使用Jquery 1.7+。 - coder

我运气不佳，而且在所有这些JavaScript文件中迷失了方向。有没有办法将$('#fileup').fileupload({});函数包装到jQuery button.click中？ - Subliminal Hash

@Emin-你不能将按钮点击包装在其中，因为你必须在参数中提到它。这就是我所拥有的，你可以测试这个简单的，自动上传设置为false的文件。检查一下，如果有任何问题，请让我知道。这是链接http://www.box.com/s/g54ychd24obrt8fplqu3。 - coder

我有所有的文件，但这不是我的实现。你能从这个链接中理解到任何东西吗？https://github.com/blueimp/jQuery-File-Upload/issues/946 顺便说一句，如果我给你带来了麻烦，我很抱歉，感谢你的帮助。 - Subliminal Hash

如果你使用的不是 UI 界面，只需查看相应的 js 文件即可。 - ImaginedDesign