Загрузка файла jQuery: возможно ли инициировать загрузку с помощью кнопки отправки?

Ответ 1

если у вас есть кнопка

<button id="up_btn">Upload</button>

Вы можете попробовать с помощью

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {            
        $("#up_btn").off('click').on('click', function () {
            data.submit();
        });
    },
});

ИЗМЕНИТЬ: в соответствии с комментариями лучше ответить off, чтобы избежать дублирования запросов. (также работает unbind, я не проверяю, есть ли bind и unbind, но команда jquery рекомендует on и off link так как 1.7)

Ответ 2

Вы также можете найти в jquery.fileupload.js

В строке 142 есть опция 'autoUpload'.

uploadedBytes: undefined,
// By default, failed (abort or error) file uploads are removed from the
// global progress calculation. Set the following option to false to
// prevent recalculating the global progress data:
recalculateProgress: true,
// Interval in milliseconds to calculate and trigger progress events:
progressInterval: 100,
// Interval in milliseconds to calculate progress bitrate:
bitrateInterval: 500,
// By default, uploads are started automatically when adding files:
autoUpload: true    // <<---------- here

Ответ 3

Ни один из этих ответов не будет работать для нескольких загрузок файлов. В моем случае было задействовано несколько вложений в поток комментариев. Поэтому мне сначала нужно было сохранить комментарий, чтобы получить идентификатор, а затем загрузить и сохранить все вложения. Это похоже на тривиальную вещь, но с этим плагином это не интуитивно. Мое решение использует пользовательские события в jQuery и отлично работает.

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

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {
        $("#up_btn").on('customName', function (e) {
            data.submit();
        });
    },
});

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

$("#up_btn").on('click', function (e) {
    e.preventDefault();
    $("#up_btn").trigger( "customName");
});

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

Ответ 4

Не устанавливайте события, добавляя событие каждый раз, когда файл добавляется. Таким образом, форма будет представлена ​​несколько раз.

Я бы сделал что-то вроде этого

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {            
        $("#up_btn").off('click').on('click', function () {
            data.submit();
        });
    },
});

Обратите внимание на метод off(), чтобы удалить все предыдущие прикрепленные события.

Ответ 5

для использования добавляемых шаблонов, чтобы следить за загрузкой и загрузкой, необходимо сделать это таким образом

$('#fileupload').fileupload({
    dataType: 'json',
    add: function (e, data) {
        var that = this;
	    $.blueimp.fileupload.prototype.options.add.call(that, e, data);
        $("#up_btn").on('click', function () {
            data.submit();
        });
    },
});

Ответ 6

Вы можете сделать это, подключившись к событию добавления. Там вы не позволяете загрузчику выполнять свое поведение по умолчанию. Jquery-file-upload-docs объясняют это, но его немного сложно найти.

В учебнике по загрузке байкеров blueimp написано:

$(function () {
    $('#fileupload').fileupload({
        dataType: 'json',
        add: function (e, data) {
            data.context = $('<button/>').text('Upload')
                .appendTo(document.body)
                .click(function () {
                    data.context = $('<p/>').text('Uploading...').replaceAll($(this));
                    data.submit();
                });
        },
        done: function (e, data) {
            data.context.text('Upload finished.');
        }
    });
});

На самом деле очень важно, что создаваемая вами кнопка отправки не находится внутри формы.

Ответ 7

В загруженном примере Перейдите к js/jquery.fileupload-ui.js, и в этом случае у вас будет autoUpload, который установлен true по умолчанию, и он будет "false", тогда вы можете использовать поведение отправки.

EDIT:

Попробуйте это для основной реализации:

 <script>
    /*global $ */
    $(function() {


        $('.file_upload').fileUploadUI({
            url: 'FileUpload.ashx',
            method: 'POST',
            uploadTable: $('#files'),
            downloadTable: $('#files'),
            buildUploadRow: function (files, index) {
                return $('<tr><td>' + files[index].name + '<\/td>' +
                    '<td class="file_upload_progress"><div><\/div><\/td>' +
                    '<\/td><\/tr>');
            },
            buildDownloadRow: function(file) {
            return $('<tr id="file_'+file.name+'"><td>' + file.name + '<\/td>'
                + '<td class="file_uploaded">' +
                '<span class="ui-icon ui-icon-check"><\/span>' +
                '<\/td><\/tr>');

            }, beforeSend: function(event, files, index, xhr, handler, callBack) {
                if (files[index].size > 500000) {
                    handler.uploadRow.find('.file_upload_progress').html('<span class="ui-icon ui-icon-alert"><\/span>FILE TOO BIG!');
                    setTimeout(function() {
                        handler.removeNode(handler.uploadRow);
                    }, 10000);
                    return;
                }
                callBack();
            }
        });
    });
</script> 

Ответ 8

Вот как я реализовал загрузку файлов с помощью кнопки:

Вот кнопка:

 <button id="cmdSave" type="button" class="btn btn-primary" onclick="SaveInfo();">Save</button>

Вот элемент ввода:

    <input id="fileupload" type="file" name="files[]" style="display: none;">

Вот функция SaveInfo():

    //use this function to save Info with Attached file
    function SaveInfo() {
        // setup our wp ajax URL
        var action_url = document.location.protocol + '//' + document.location.host + '/SaveInfo';

        $('body').addClass('waiting');
        //get the file(s)
        var filesList = $('input[type="file"]').prop('files');

        //Initialize the file uploader
        $('#Editor').fileupload();           //Editor is the Id of the form

        //Along with file, this call internally sends all of the form data!!!
        $('#Editor').fileupload('add', {
            files: filesList,
            url: action_url
        })

        $('#Editor').bind('fileuploaddone', function (e, data) {
            e.preventDefault(); //stop default behaviour!
            if (data.result.status == 1) {  //saved!
                 //do something useful here...
            }
            $('body').removeClass('waiting');
        });

        // Callback for failed (abort or error) uploads:
        $('#Editor').bind('fileuploadfail', function (e, data) {
            e.preventDefault(); //stop default behaviour!
            $('body').removeClass('waiting');
        });
    }

Примечание: Это может быть не очень элегантно, но это работает для меня. Это также отправит все поля в форме на сервер. Это будет ТОЛЬКО отправлять поля в форме, если файл также загружается. Если файл отсутствует, это НЕ отправит данные формы на сервер! Хотя я не тестировал его с несколькими файлами, этот метод может быть расширен и для мультипликаторов. Когда я попробую, я обновлю это сообщение с информацией.

Ответ 9

Использовать следующее:

<script type="text/javascript" charset="utf-8">
    $(function () {
        $('#fileupload').fileupload({
            autoUpload: true
        });
    });
</script>

Он помогло.