Загрузка нескольких файлов Javascript, последовательно по одному - PullRequest
Новая
       14

Загрузка нескольких файлов Javascript, последовательно по одному

0 голосов
/ 02 декабря 2009

У нас есть форма с пятью <input type="file"/> элементами, которая находится в производстве и отлично работает. Мы получаем тайм-ауты запроса и MaxRequestLength иногда превышают ошибки. Чтобы предотвратить эти ошибки, я планировал написать несколько Javascript для загрузки файлов по одному вместо всех сразу. Вот как я планировал это сделать ...

  1. В document.ready вставьте скрытый iframe на страницу
  2. Измените <form>, чтобы настроить на iframe
  3. Отключить все элементы в форме (что предотвращает их размещение)
  4. Включите одну загрузку файла за раз и отправьте форму
  5. Дождаться ответа от сервера
  6. Когда ответ сервера печатается в iframe, начните следующую загрузку
  7. Когда все загрузки завершены, обновите страницу, которая вызовет некоторую серверную логику, которая заполняет сетку.

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

$(function() {
  $("<iframe/>").attr("src", "test.htm").attr("name", "postMe").hide().appendTo("body");
  $("form").attr("target", "postMe").submit(function(e) {
    e.preventDefault();
    $("#btnSubmit").attr("disabled", "disabled").val("Please Wait, Files are Uploading");

    for(var i = 1; i < 6; i++) {
      $("input[type=file]").attr("disabled", "disabled");
      $("#FileUpload" + i).removeAttr("disabled");
      $("form")[0].submit();
      // HELP!!!
      // How do I wait for server before next iteration?
    }

    location.reload(true);
  });
});

Какая конструкция мне нужна здесь, чтобы «дождаться» ответа сервера, прежде чем начать следующую загрузку?

Ответы [ 4 ]

2 голосов
/ 03 декабря 2009

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

http://www.uploadify.com/

1 голос
/ 01 декабря 2010

Это можно сделать с помощью метода jQuery queue и события load . 

<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script>
//here's an upload script
(function($){
    //make 'em accessible within the scope
    var $iframe, $form;

    $(document).ready(function(){
        //create 'em only once, but use 'em many times
        $iframe = $('<iframe name="iframe" id="iframe" style="display:none"></iframe>').appendTo('body');       
        $form = $('<form method="post" enctype="multipart/form-data" target="iframe" style="display:none"></form>').appendTo('body');   
    });

    var iframeUpload = $({});

    $.iframeUpload = function(s){   
        iframeUpload.queue(function(next){
            //as we only wanna this new event
            $iframe.load(function(){
                //we must unbind the old one
                $iframe.unbind('load');

                //success or error, the question is up to you
                s.success();

                //but remember to remove or replace the old stuff
                $form.find('input').remove();

                next();
            });

            $form.attr('action', s.url).append(s.file).submit();
        });
    };
})(jQuery); 
//and this is how to use the script
(function($){$(document).ready(function(){
    $('input[type="submit"]').click(function(){
        $('input[type="file"]').each(function(){
            $.iframeUpload({
                url: 'http://example.com/upload.php',
                file: this,
                success: function(){
                    console.log('uploaded');
                }
            });
       });
    }); 
})})(jQuery);   
</script>
</head>
<body>   
    <!-- here are multiple files -->
    <input type="file" name="file" />
    <input type="file" name="file" />
    <input type="file" name="file" /> 
    <!-- to upload -->
    <input type="submit" />
</body>
</html>
1 голос
/ 02 декабря 2009

Только к вашему сведению: плагин jquery.forms предназначен для создания представлений в форме ajax. Я использую этот плагин для отправки формы (такой как загрузка файла) в отдельном iframe, который плагин автоматически обрабатывает, и дает вам хороший обратный вызов при заполнении.

Таким образом, большая часть работы для вас выполнена.

http://jquery.malsup.com/form/

1 голос
/ 02 декабря 2009

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...