13

我正在使用 blueint jquery.fileupload 插件使用 asp.net 上传文件

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

插件： https ://github.com/ieb/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 文件中是否已经提供了这个功能（可能是）。有什么想法我需要改变或做什么？

4

2 回答 2

19

将add文件添加到小部件后立即调用回调，因此您需要覆盖它以暂停上传，然后单击按钮启动它。

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

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

于 2012-06-27T00:08:01.473 回答
6

这很容易做到，因为" autoUpload: true"在jquery.fileupload-ui.js

如果将其更改为false并且可以在按钮 Click 事件上手动编码。

于 2012-03-06T10:28:08.543 回答