Отключение автоматической загрузки при загрузке файлов jimpery Blueimp - PullRequest
Новая
       25

Отключение автоматической загрузки при загрузке файлов jimpery Blueimp

12 голосов
/ 06 марта 2012

Я использую плагин blueint jquery.fileupload для загрузки файлов с использованием asp.net

У меня есть ситуация, когда у меня есть страница, позволяющая пользователю выбрать категорию (выпадающий список), заголовок (длязагруженный файл - TextBox) и файл ввода (обрабатывается плагином).

плагин: 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, доступных с плагином.Есть идеи, что мне нужно изменить или сделать?

Ответы [ 2 ]

18 голосов
/ 27 июня 2012

Обратный вызов add вызывается, как только файлы добавляются в виджет, поэтому вам необходимо переопределить его, чтобы приостановить загрузку, а затем запустить его нажатием кнопки.

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

Обновление: в документации есть лучший пример этого:

6 голосов
/ 06 марта 2012

Это очень легко сделать, так как есть опция " autoUpload: true", которая установлена ​​по умолчанию в jquery.fileupload-ui.js

Если вы измените его на false, и вы можете вручную кодировать событие нажатия кнопки.

...