Отправка формы Jquery после загрузки файла

Я понимаю, что этот вариант вопроса появлялся много раз, но я не могу найти ответ на этот вопрос в таком контексте.

Я использую сторонний загрузчик файлов, который использует jQuery и дает обратный вызов после завершения загрузки файла.

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

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

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

Функция manualuploader.uploadStoredFiles(); запускается при нажатии кнопки «Загрузить сейчас».

jQuery, который создает экземпляр загрузчика файлов, выглядит следующим образом:

<form action="index.php" method="post" enctype="multipart/form-data" id="uploader">
<div id="manual-fine-uploader"></div>
<div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
<input type="text" name="textbox" value="Test data">
<input name="test" type="button" value="Upload now">
</div>
</form>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="fineuploader-3.6.3.js"></script>
<script>
$(document).ready(function() {
var manualuploader = new qq.FineUploader({
        element: $('#manual-fine-uploader')[0],
        request: {
                endpoint: 'uploader.php'
        },
        autoUpload: false,
        text: {
                uploadButton: '<i class="icon-plus icon-white"></i> Select Files'
        }
        });
        $('#triggerUpload').click(function() {      
        manualuploader.uploadStoredFiles();
        });
});

</script>

javascript jquery ajax fine-uploader
person Community    schedule 07.06.2013    source источник
comment
В вашей форме нет ничего явно относящегося к делу. Зачем вам эта форма? Пожалуйста, укажите реалистичный контекст.   -  person Ray Nicholus    schedule 07.06.2013
comment
Это пример для упрощения. Я хочу, чтобы пользователь заполнил другую информацию (до начала загрузки), которая отправляется после завершения загрузки.   -  person    schedule 07.06.2013
comment
Это похоже на дубликат stackoverflow.com/questions/16940096/.   -  person Ray Nicholus    schedule 07.06.2013
comment
Это не так, и принятый ответ - это не то, что я ищу. Вы описываете метод создания элементов формы «на файл» перед загрузкой, тогда как мне нужна информация, не связанная напрямую со сценарием загрузки. Я просто хочу, чтобы форма была отправлена ​​после завершения загрузки. Я должен удалить тег Fine-uploader, так как это скорее общий вопрос jQuery.   -  person    schedule 07.06.2013
comment
Итак, вы просто хотите определить, когда все файлы были успешно загружены, прежде чем отправлять какую-либо форму?   -  person Ray Nicholus    schedule 07.06.2013
comment
Да, это то, что я ищу.   -  person    schedule 07.06.2013

Ответы (1)


arrow_upward
6
arrow_downward

Я заметил, что вы используете jQuery. Почему бы вам не использовать оболочку jQuery для Fine Uploader?

Я бы прослушал обратный вызов onComplete, который запускается после завершения загрузки (успешно или нет). Когда onComplete запускается, мы переходим к submitForm(), который содержит логику для проверки того, что все файлы были успешно отправлены.

Логика относительно проста: если у нас нет обрабатываемых файлов и нет файлов с qq.status из FAILED, мы можем приступить к отправке формы.

Кроме того, я слушаю обратный вызов onCancel, чтобы убедиться, что форма будет отправлена, если загрузка не удалась и, следовательно, была отменена.

Есть еще много обратных вызовов. Я бы посоветовал ознакомиться с документацией Fine Uploader по обратным вызовам, а также методы API. Кроме того, я бы посмотрел документы jQuery Fine Uploader.

Если понимание jQuery является вашей проблемой, я бы посоветовал держать рядом это.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="fineuploader-3.6.3.js"></script>

<form action="index.php" method="post" id="uploader">
<input type="text" name="textbox" value="Test data">
    <div id="manual-fine-uploader"></div>
    <div id="triggerUpload" class="btn btn-primary" style="margin-top: 10px;">
    </div>
</form>



$(document).ready(function() {

    $("#triggerUpload").click(function () {
        $("#manual-fine-uploader").fineUploader('uploadStoredFiles'); 
    });

    function submitForm () { 
        if ($(this).fineUploader('getInProgress') == 0) {
            var failedUploads = $(this).fineUploader('getUploads', 
                { status: qq.status.UPLOAD_FAILED });
            if (failedUploads.length == 0) {    
                // do any other form processing here
                $("#uploader").submit();
            }
        }
    };

    // Instantiate a Fine Uploader instance:
    $("#manual-fine-uploader").fineUploader({
        autoUpload: false,
        request: {
            endpoint: "/uploads_bucket"
        }
    }).on("complete", function (event, id, name, response) {
        submitForm.call(this);
    }).on('statusChange', function (event, id, oldStatus, newStatus) {
        if (newStatus === qq.status.CANCELED) {
            submitForm.call(this);
        } 
    });
});

Дайте мне знать, если у вас есть еще вопросы, с которыми я могу помочь.

person Mark Feltner    schedule 07.06.2013
comment
Спасибо, вы знаете, почему браузер (Firefox) выдает событие beforeunload («Браузер пытается покинуть эту страницу, вы уверены?») при загрузке более одного файла? С одним файлом форма отправляется без каких-либо предупреждений. - person ; 10.06.2013
comment
Извините, я был глуп. Спасибо, я проверил это для нескольких загрузок файлов, и кажется, что загрузчик не будет отправлять, если у меня есть проверка getInProgress. Несмотря на то, что файл завершен, и он вызывает submitForm только после его завершения, я предполагаю, что значение getInProgress не равно 0. - person ; 10.06.2013
comment
@monkeymatrix Это диалоговое окно перед выгрузкой будет отображаться, если у вас есть какие-либо файлы в процессе. Если вы видите это диалоговое окно, некоторые файлы все еще находятся в процессе загрузки. - person Ray Nicholus; 10.06.2013
comment
Спасибо, это имеет смысл :) - person ; 10.06.2013
comment
@monkeymatrix Отлично! Не могли бы вы принять ответ Марка, если он помог вам решить вашу проблему? - person Ray Nicholus; 10.06.2013