Как я могу загружать файлы асинхронно?

Решение, которое я нашел, состояло в том, чтобы иметь эти <form>, предназначаются для скрытого iFrame. iFrame может тогда выполнить JS для отображения пользователю, что это завершено (на загрузке страницы).

Примечание: Этот ответ устарел, теперь возможно загрузить файлы с помощью XHR.

Вы не можете загрузить файлы с помощью (Ajax) XMLHttpRequest . Можно моделировать эффект с помощью iframe или Flash. Превосходное Плагин Формы jQuery , который отправляет Ваши файлы через iframe для получения эффекта.

Обновление 2019 года: Это все еще зависит от браузеров Ваш демографическое использование.

важная вещь понять с "новым" HTML5 file API состоит в том, что он не поддерживался до IEВ 10. Если определенный рынок, к которому Вы стремитесь, имеет более высокую, чем среднее число склонность к более старым версиям Windows, у Вас не могло бы быть доступа к нему.

По состоянию на 2017, приблизительно 5% браузеров являются одним из IE 6, 7, 8 или 9. Если Вы направляетесь в крупную корпорацию (например, это - инструмент B2B или что-то, что Вы поставляете для обучения), что число может взлететь. В 2016 я имел дело с компанией с помощью IE8 на более чем 60% их машин.

Это - 2019 с этого редактирования, спустя почти 11 лет после моего первоначального ответа. IE9 и ниже глобально вокруг 1%-й метки, но существуют все еще кластеры более высокого использования.

важная еда на дом от этого — безотносительно feature—, проверка, какой браузер Ваш пользователи используют . Если Вы не сделаете, Вы извлечете быстрый и болезненный урок в том, почему "работы для меня" не достаточно хорошо в поставляемом компоненте клиенту. caniuse является полезным инструментом, но отметьте, где они получают свою демографию от. Они не могут выровняться с Вашим. Это никогда не более верно, чем корпоративная среда.

Мой ответ с 2008 следует.

Однако существуют жизнеспособные методы non-JS загрузок файла. Можно создать iframe на странице (что Вы скрываетесь с CSS), и затем будьте нацелены на свою форму для регистрации на это iframe. Основная страница не должна перемещаться.

Это - "реальное" сообщение, таким образом, это не является совершенно интерактивным. При необходимости в состоянии, Вам нужно что-то серверная сторона для обработки этого. Это варьируется в широком масштабе в зависимости от Вашего сервера. ASP.NET имеет более хорошие механизмы. Простые сбои PHP, но можно использовать Perl или модификации Apache для обхождения его.

, Если Вам нужны несколько загрузок файла, лучше, действительно каждый регистрируют по одному (для преодоления максимальных пределов загрузки файла). Отправьте первую форму на iframe, контролируйте его прогресс с помощью вышеупомянутого и когда это закончилось, отправьте вторую форму на iframe и так далее.

Или использование решение для Java/Flash. Они намного более гибки в том, что они могут сделать с их сообщениями...

Я рекомендую использовать Прекрасный Загрузчик плагин с этой целью. Ваш JavaScript код был бы:

$(document).ready(function() {
  $("#uploadbutton").jsupload({
    action: "addFile.do",
    onComplete: function(response){
      alert( "server response: " + response);
    }
  });
});

Я написал это в среде Rails . Если вы используете облегченный плагин jQuery-form, это всего лишь около пяти строк JavaScript.

Проблема состоит в том, чтобы заставить AJAX-загрузку работать, поскольку стандартный remote_form_for не поддерживает отправку многостраничных форм. Он не будет отправлять данные файла, которые Rails ищет обратно с запросом AJAX.

Вот где в игру вступает плагин jQuery-form.

Вот код Rails для этого:

<% remote_form_for(:image_form, 
                   :url => { :controller => "blogs", :action => :create_asset }, 
                   :html => { :method => :post, 
                              :id => 'uploadForm', :multipart => true }) 
                                                                        do |f| %>
 Upload a file: <%= f.file_field :uploaded_data %>
<% end %>

Вот связанный с ним JavaScript:

$('#uploadForm input').change(function(){
 $(this).parent().ajaxSubmit({
  beforeSubmit: function(a,f,o) {
   o.dataType = 'json';
  },
  complete: function(XMLHttpRequest, textStatus) {
   // XMLHttpRequest.responseText will contain the URL of the uploaded image.
   // Put it in an image element you create, or do with it what you will.
   // For example, if you have an image elemtn with id "my_image", then
   //  $('#my_image').attr('src', XMLHttpRequest.responseText);
   // Will set that image tag to display the uploaded image.
  },
 });
});

А вот действие контроллера Rails, довольно ванильное:

 @image = Image.new(params[:image_form])
 @image.save
 render :text => @image.public_filename

Я использовал его последние несколько недель с Bloggity, и он работал как чемпион.