30 ответов

• 2357 рейтинг

  С HTML5 вы можете загружать файлы с помощью Ajax и jQuery. Кроме того, вы можете выполнять проверку файлов (имя, размер и тип MIME) или обрабатывать событие progress с помощью тега прогресса HTML5 (или div). Недавно мне пришлось сделать загрузчик файлов, но я не хотел использовать Flash или Iframes или плагины, и после некоторых исследований я нашел решение.

  HTML:

  Во-первых, вы можете сделать некоторую проверку, если хотите. Например, в событии onChange файла:

  $(':file').on('change', function() {
      var file = this.files[0];
      if (file.size > 1024) {
          alert('max upload size is 1k')
      }
  
      // Also see .name, .type
  });
  

  Теперь Ajax отправляется нажатием кнопки:

  $(':button').on('click', function() {
      $.ajax({
          // Your server script to process the upload
          url: 'upload.php',
          type: 'POST',
  
          // Form data
          data: new FormData($('form')[0]),
  
          // Tell jQuery not to process data or worry about content-type
          // You *must* include these options!
          cache: false,
          contentType: false,
          processData: false,
  
          // Custom XMLHttpRequest
          xhr: function() {
              var myXhr = $.ajaxSettings.xhr();
              if (myXhr.upload) {
                  // For handling the progress of the upload
                  myXhr.upload.addEventListener('progress', function(e) {
                      if (e.lengthComputable) {
                          $('progress').attr({
                              value: e.loaded,
                              max: e.total,
                          });
                      }
                  } , false);
              }
              return myXhr;
          }
      });
  });
  

  Как вы можете видеть, с HTML5 (и некоторыми исследованиями) загрузка файлов не только становится возможной, но и очень простой. Попробуйте сделать это с Google Chrome , поскольку некоторые компоненты HTML5 примеров доступны не во всех браузерах.

  ответ дан olanod, с репутацией 25162, 6.01.2012
• 337 рейтинг

  Существуют различные готовые плагины для загрузки файлов для jQuery.

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

  Вот несколько:

  • JQuery File Uploader
  • Плагин для загрузки нескольких файлов
  • Мини-загрузка нескольких файлов
  • jQuery Загрузка файла

  Вы можете искать другие проекты в NPM (используя «jquery-plugin» в качестве ключевого слова) или в Github.

  ответ дан Cheery, с репутацией 12248, 15.10.2008
• 241 рейтинг

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

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

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

  Итак, прежде чем что-то делать: проверьте, какой браузер используют ваши пользователи . Если вы этого не сделаете, вы извлечете быстрый и мучительный урок о том, почему «работает на меня» недостаточно хорошо в доставке клиенту.

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

  ---

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

  Это «реальный» пост, поэтому он не является полностью интерактивным. Если вам нужен статус, вам нужно что-то на стороне сервера для обработки этого. Это сильно зависит от вашего сервера. ASP. NET имеет более приятные механизмы. Обычный PHP не работает, но вы можете использовать Perl или модификации Apache, чтобы обойти это.

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

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

  ответ дан Oli, с репутацией 115538, 3.10.2008
• 106 рейтинг

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

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

  ответ дан Darryl Hein, с репутацией 66521, 21.11.2008
• 90 рейтинг

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

  ---

  Нельзя загружать файлы, используя XMLHttpRequest (Ajax). Вы можете имитировать эффект, используя iframe или Flash. Отличный плагин jQuery Form , который отправляет ваши файлы через iframe, чтобы получить эффект.

  ответ дан Mattias, с репутацией 2355, 3.10.2008
• 82 рейтинг

  Этот плагин jQuery для загрузки файла AJAX загружает файл где-то и передает ответ на обратный звонок, больше ничего.

  • Это не зависит от конкретного HTML, просто дайте ему
  • Ваш сервер не требует какого-либо ответа
  • Неважно, сколько файлов вы используете или где они находятся на странице

  - Используйте всего лишь -

  $('#one-specific-file').ajaxfileupload({
    'action': '/upload.php'
  });
  

  - или столько, сколько -

  $('input[type="file"]').ajaxfileupload({
    'action': '/upload.php',
    'params': {
      'extra': 'info'
    },
    'onComplete': function(response) {
      console.log('custom handler for file:');
      alert(JSON.stringify(response));
    },
    'onStart': function() {
      if(weWantedTo) return false; // cancels upload
    },
    'onCancel': function() {
      console.log('no file selected');
    }
  });
  

  ответ дан Jordan Feldstein, с репутацией 5918, 29.07.2011
• 78 рейтинг

  Подведение итогов для будущих читателей.

  Асинхронная загрузка файла

  с HTML5

  Можно загружать файлы с помощью jQuery , используя метод $.ajax(), если поддерживаются FormData и File API (обе функции HTML5).

  Также можно отправлять файлы

  без FormData , но в любом случае должен быть представлен API-интерфейс файлов для обработки файлов таким образом, чтобы их можно было отправлять с XMLHttpRequest (Ajax).

  $.ajax({
    url: 'file/destination.html', 
    type: 'POST',
    data: new FormData($('#formWithFiles')[0]), // The form with the file inputs.
    processData: false,
    contentType: false                    // Using FormData, no need to process data.
  }).done(function(){
    console.log("Success: Files sent!");
  }).fail(function(){
    console.log("An error occurred, the files couldn't be sent!");
  });
  

  Быстрый, чистый пример JavaScript ( no jQuery ) см. В разделе « Отправка файлов с использованием объекта FormData ».

  Откат

  Когда HTML5 не поддерживается (без File API ), единственным другим чистым решением JavaScript (без Flash или любого другого подключаемого модуля браузера) является скрытый метод iframe , который позволяет эмулировать асинхронный запрос без использования . Объект XMLHttpRequest .

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

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

  В этом случае вы можете предпочесть использовать плагин-обертку, например Bifröst , который использует технику iframe , но также предоставляет jJuery Ajax транспорт , позволяющий отправлять файлы , только метод 3090778 1190 как этот код:

  $.ajax({
    url: 'file/destination.html', 
    type: 'POST',
    // Set the transport to use (iframe means to use Bifröst)
    // and the expected data type (json in this case).
    dataType: 'iframe json',                                
    fileInputs: $('input[type="file"]'),  // The file inputs containing the files to send.
    data: { msg: 'Some extra data you might need.'}
  }).done(function(){
    console.log("Success: Files sent!");
  }).fail(function(){
    console.log("An error occurred, the files couldn't be sent!");
  });
  

  Плагины

  Bifröst - это всего лишь небольшая оболочка, которая добавляет резервную поддержку метода ajax jQuery, но многие из вышеупомянутых плагинов, такие как плагин формы jQuery или , возможность загрузки файлов включают в себя различные варианты возврата к стекам HTML и некоторые полезные функции из HTML-стека облегчить процесс. В зависимости от ваших потребностей и требований вы можете рассмотреть пустую реализацию или один из этих плагинов.

  ответ дан 404, с репутацией 1067, 25.08.2014
• 57 рейтинг

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

  HTML

  JavaScript

  jQuery('document').ready(function(){
      var input = document.getElementById("file");
      var formdata = false;
      if (window.FormData) {
          formdata = new FormData();
      }
      input.addEventListener("change", function (evt) {
          var i = 0, len = this.files.length, img, reader, file;
  
          for ( ; i < len; i++ ) {
              file = this.files[i];
  
              if (!!file.type.match(/image.*/)) {
                  if ( window.FileReader ) {
                      reader = new FileReader();
                      reader.onloadend = function (e) {
                          //showUploadedItem(e.target.result, file.fileName);
                      };
                      reader.readAsDataURL(file);
                  }
  
                  if (formdata) {
                      formdata.append("image", file);
                      formdata.append("extra",'extra-data');
                  }
  
                  if (formdata) {
                      jQuery('div#response').html('
  ');
  
                      jQuery.ajax({
                          url: "upload.php",
                          type: "POST",
                          data: formdata,
                          processData: false,
                          contentType: false,
                          success: function (res) {
                           jQuery('div#response').html("Successfully uploaded");
                          }
                      });
                  }
              }
              else
              {
                  alert('Not a vaild image!');
              }
          }
  
      }, false);
  });
  

  Объяснение

  Я использую ответ div, чтобы показать анимацию загрузки и ответ после загрузки.

  Самое приятное, что вы можете отправлять дополнительные данные, такие как идентификаторы & amp; и т.д. с файлом, когда вы используете этот скрипт. Я упомянул это extra-data как в сценарии.

  На уровне PHP это будет работать как обычная загрузка файла. дополнительные данные могут быть получены в виде данных $_POST.

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

  ответ дан Techie, с репутацией 28586, 25.01.2013
• 55 рейтинг

  Я столкнулся с несколькими действительно мощными библиотеками для загрузки файлов на основе jQuery. Проверьте это:

  1. Plupload
     • документы: http: // www. plupload. com / docs
  2. jQuery Загрузка файла
     • документы: https: // github. com / blueimp / jQuery-File-Upload
  3. FineUploader
     • документы: http: // docs. fineuploader. com /

  ответ дан Hristo, с репутацией 23463, 8.04.2011
• 42 рейтинг

  Вы можете загрузить просто с jQuery .ajax().

  HTML:

  File:

  ---

  CSS

  .progress { display: none; }
  

  Javascript:

  $(document).ready(function(ev) {
      $("#upload-form").on('submit', (function(ev) {
          ev.preventDefault();
          $.ajax({
              xhr: function() {
                  var progress = $('.progress'),
                      xhr = $.ajaxSettings.xhr();
  
                  progress.show();
  
                  xhr.upload.onprogress = function(ev) {
                      if (ev.lengthComputable) {
                          var percentComplete = parseInt((ev.loaded / ev.total) * 100);
                          progress.val(percentComplete);
                          if (percentComplete === 100) {
                              progress.hide().val(0);
                          }
                      }
                  };
  
                  return xhr;
              },
              url: 'upload.php',
              type: 'POST',
              data: new FormData(this),
              contentType: false,
              cache: false,
              processData: false,
              success: function(data, status, xhr) {
                  // ...
              },
              error: function(xhr, status, error) {
                  // ...
              }
         });
      }));
  });
  

  ответ дан Zayn Ali, с репутацией 2932, 8.08.2014
• 40 рейтинг

  Вы можете сделать это в обычном JavaScript довольно легко. Вот фрагмент моего текущего проекта:

  var xhr = new XMLHttpRequest();
  xhr.upload.onprogress = function(e) {
      var percent = (e.position/ e.totalSize);
      // Render a pretty progress bar
  };
  xhr.onreadystatechange = function(e) {
      if(this.readyState === 4) {
          // Handle file upload complete
      }
  };
  xhr.open('POST', '/upload', true);
  xhr.setRequestHeader('X-FileName',file.name); // Pass the filename along
  xhr.send(file);
  

  ответ дан mpen, с репутацией 117292, 17.02.2013
• 37 рейтинг

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

  То есть, если вы не хотите использовать плагин, JavaScript или любые другие формы «магии», кроме HTML. Конечно, вы можете сочетать это с JavaScript или что-то еще. , ,

  Вы также можете прочитать содержимое iframe onLoad на наличие ошибок сервера или ответов об успешном завершении, а затем вывести его пользователю.

  Chrome, iFrames и onLoad

  -note- вам нужно только продолжать чтение, если вы заинтересованы в том, как настроить блокировщик пользовательского интерфейса при загрузке / загрузке

  В настоящее время Chrome не вызывает событие onLoad для iframe, когда оно используется для передачи файлов. Firefox, IE и Edge запускают событие onload для передачи файлов.

  Единственное решение, которое я нашел для Chrome - это использование файла cookie.

  Чтобы сделать это в основном, когда загрузка / загрузка начата:

  • [Клиентская сторона] Начать интервал для поиска наличия cookie
  • [Server Side] Делайте все, что вам нужно с данными файла
  • [Server Side] Установить cookie для клиентского интервала
  • [Клиентская сторона] Интервал видит cookie и использует его как событие onLoad. Например, вы можете запустить блокировщик пользовательского интерфейса, а затем onLoad (или при создании cookie) удалить блокировщик пользовательского интерфейса.

  Использование куки для этого уродливо, но работает.

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

  https: // github. ком / ArtisticPhoenix / JQuery-плагинов / BLOB / Master / iDownloader. JS

  Тот же основной принцип применим и к загрузке.

  Чтобы использовать загрузчик (включая JS, очевидно)

   $('body').iDownloader({
       "onComplete" : function(){
            $('#uiBlocker').css('display', 'none'); //hide ui blocker on complete
       }
   });
  
   $('somebuttion').click( function(){
        $('#uiBlocker').css('display', 'block'); //block the UI
        $('body').iDownloader('download', 'htttp://example.com/location/of/download');
   });
  

  А на стороне сервера, непосредственно перед передачей данных файла, создайте файл cookie

   setcookie('iDownloader', true, time() + 30, "/");
  

  Плагин увидит cookie, а затем вызовет обратный вызов onComplete.

  ответ дан ArtisticPhoenix, с репутацией 12812, 26.06.2014
• 31 рейтинг

  Решение, которое я нашел, состояло в том, чтобы

  был нацелен на скрытый кадр. Затем iFrame может запустить JS, чтобы показать пользователю, что он завершен (при загрузке страницы).

  ответ дан Darryl Hein, с репутацией 66521, 18.10.2008
• 30 рейтинг

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

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

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

  Вот код 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, и это работало как чемпион.

  ответ дан wbharding, с репутацией 1220, 13.08.2009
• 29 рейтинг

  Простой Ajax Uploader является еще одним вариантом:

  https: // github. ru / LPology / Simple-Ajax-Uploader

  • Кросс-браузер - работает в IE7 +, Firefox, Chrome, Safari, Opera
  • Поддерживает несколько одновременных загрузок - даже в браузерах, отличных от HTML5
  • Нет флеш-памяти или внешнего CSS - только один 5-килобайтный файл JavaScript
  • Дополнительная встроенная поддержка полностью кросс-браузерных индикаторов прогресса (с использованием PHP-расширения APC)
  • Гибкость и широкие возможности настройки - используйте любой элемент в качестве кнопки загрузки, стилизуйте свои собственные индикаторы прогресса
  • Не требуется никаких форм, просто укажите элемент, который будет использоваться в качестве кнопки загрузки.
  Лицензия
  • MIT - бесплатно для использования в коммерческом проекте

  Пример использования:

  var uploader = new ss.SimpleUpload({
      button: $('#uploadBtn'), // upload button
      url: '/uploadhandler', // URL of server-side upload handler
      name: 'userfile', // parameter name of the uploaded file
      onSubmit: function() {
          this.setProgressBar( $('#progressBar') ); // designate elem as our progress bar
      },
      onComplete: function(file, response) {
          // do whatever after upload is finished
      }
  });
  

  ответ дан user1091949, с репутацией 1223, 26.06.2013
• 21 рейтинг

  jQuery Uploadify - это еще один хороший плагин, который я использовал для загрузки файлов. Код JavaScript так же прост, как и следующий: код. Однако новая версия не работает в Internet Explorer.

  $('#file_upload').uploadify({
      'swf': '/public/js/uploadify.swf',
      'uploader': '/Upload.ashx?formGuid=' + $('#formGuid').val(),
      'cancelImg': '/public/images/uploadify-cancel.png',
      'multi': true,
      'onQueueComplete': function (queueData) {
          // ...
      },
      'onUploadStart': function (file) {
          // ...
      }
  });
  

  Я много занимался поиском и нашел другое решение для загрузки файлов без какого-либо плагина и только с ajax. Решение, как показано ниже:

  $(document).ready(function () {
      $('#btn_Upload').live('click', AjaxFileUpload);
  });
  
  function AjaxFileUpload() {
      var fileInput = document.getElementById("#Uploader");
      var file = fileInput.files[0];
      var fd = new FormData();
      fd.append("files", file);
      var xhr = new XMLHttpRequest();
      xhr.open("POST", 'Uploader.ashx');
      xhr.onreadystatechange = function () {
          if (xhr.readyState == 4) {
               alert('success');
          }
          else if (uploadResult == 'success')
              alert('error');
      };
      xhr.send(fd);
  }
  

  ответ дан farnoush resa, с репутацией 333, 16.06.2013
• 20 рейтинг

  Вот еще одно решение, как загрузить файл ( без какого-либо плагина )

  Использование простых Javascripts и AJAX (с индикатором выполнения)

  HTML часть

  


  JS часть

  function _(el){
      return document.getElementById(el);
  }
  function uploadFile(){
      var file = _("file1").files[0];
      // alert(file.name+" | "+file.size+" | "+file.type);
      var formdata = new FormData();
      formdata.append("file1", file);
      var ajax = new XMLHttpRequest();
      ajax.upload.addEventListener("progress", progressHandler, false);
      ajax.addEventListener("load", completeHandler, false);
      ajax.addEventListener("error", errorHandler, false);
      ajax.addEventListener("abort", abortHandler, false);
      ajax.open("POST", "file_upload_parser.php");
      ajax.send(formdata);
  }
  function progressHandler(event){
      _("loaded_n_total").innerHTML = "Uploaded "+event.loaded+" bytes of "+event.total;
      var percent = (event.loaded / event.total) * 100;
      _("progressBar").value = Math.round(percent);
      _("status").innerHTML = Math.round(percent)+"% uploaded... please wait";
  }
  function completeHandler(event){
      _("status").innerHTML = event.target.responseText;
      _("progressBar").value = 0;
  }
  function errorHandler(event){
      _("status").innerHTML = "Upload Failed";
  }
  function abortHandler(event){
      _("status").innerHTML = "Upload Aborted";
  }
  

  PHP часть

  Вот пример приложения

  ответ дан Siddhartha Chowdhury, с репутацией 1226, 30.03.2016
• 14 рейтинг

  var formData=new FormData();
  formData.append("fieldname","value");
  formData.append("image",$('[name="filename"]')[0].files[0]);
  
  $.ajax({
      url:"page.php",
      data:formData,
      type: 'POST',
      dataType:"JSON",
      cache: false,
      contentType: false,
      processData: false,
      success:function(data){ }
  });
  

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

  ответ дан Vivek Aasaithambi, с репутацией 682, 28.07.2015
• 12 рейтинг

  Чтобы загрузить файл асинхронно с Jquery, используйте следующие шаги:

  шаг 1 В вашем проекте откройте диспетчер Nuget и добавьте пакет (jquery fileupload (только вам нужно записать его в поле поиска, он появится и установит его). )) URL: https: // github. com / blueimp / jQuery-File-Upload

  шаг 2 Добавьте нижеприведенные скрипты в файлы HTML, которые уже добавлены в проект, запустив вышеуказанный пакет:

  jquery. щ. виджет. JS

  jquery. IFrame-транспорт. JS

  jquery. файл загружен. JS

  step 3 Написать элемент управления загрузкой файлов в соответствии с кодом ниже:

  шаг 4 написать метод js как uploadFile, как показано ниже:

   function uploadFile(element) {
  
              $(element).fileupload({
  
                  dataType: 'json',
                  url: '../DocumentUpload/upload',
                  autoUpload: true,
                  add: function (e, data) {           
                    // write code for implementing, while selecting a file. 
                    // data represents the file data. 
                    //below code triggers the action in mvc controller
                    data.formData =
                                      {
                                       files: data.files[0]
                                      };
                    data.submit();
                  },
                  done: function (e, data) {          
                     // after file uploaded
                  },
                  progress: function (e, data) {
  
                     // progress
                  },
                  fail: function (e, data) {
  
                     //fail operation
                  },
                  stop: function () {
  
                    code for cancel operation
                  }
              });
  
          };
  

  шаг 5 В готовой загрузке файла элемента вызова функции для запуска процесса, как показано ниже:

  $(document).ready(function()
  {
      uploadFile($('#upload'));
  
  });
  

  , шаг 6 Записать контроллер MVC и выполнить действие, как указано ниже:

  public class DocumentUploadController : Controller
      {       
  
          [System.Web.Mvc.HttpPost]
          public JsonResult upload(ICollection files)
          {
              bool result = false;
  
              if (files != null || files.Count > 0)
              {
                  try
                  {
                      foreach (HttpPostedFileBase file in files)
                      {
                          if (file.ContentLength == 0)
                              throw new Exception("Zero length file!");                       
                          else 
                              //code for saving a file
  
                      }
                  }
                  catch (Exception)
                  {
                      result = false;
                  }
              }
  
  
              return new JsonResult()
                  {
                      Data=result
                  };
  
  
          }
  
      }
  

  ответ дан ashish, с репутацией 197, 23.06.2014
• 8 рейтинг

  Пример

  : Если вы используете jQuery, вы можете легко загрузить файл. Это небольшой и сильный плагин jQuery, http: // jquery. malsup. com / form / .

  Пример

  var $bar   = $('.ProgressBar');
  $('.Form').ajaxForm({
    dataType: 'json',
  
    beforeSend: function(xhr) {
      var percentVal = '0%';
      $bar.width(percentVal);
    },
  
    uploadProgress: function(event, position, total, percentComplete) {
      var percentVal = percentComplete + '%';
      $bar.width(percentVal)
    },
  
    success: function(response) {
      // Response
    }
  });
  

  Я надеюсь, что это будет полезно

  ответ дан MEAbid, с репутацией 375, 14.10.2016
• 8 рейтинг

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

  
      File
      
      
  
  

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

  $(document).ready(function () {
     $("#formContent").submit(function(e){
  
       e.preventDefault();
       var formdata = new FormData(this);
  
   $.ajax({
       url: "ajax_upload_image.php",
       type: "POST",
       data: formdata,
       mimeTypes:"multipart/form-data",
       contentType: false,
       cache: false,
       processData: false,
       success: function(){
  
       alert("successfully submitted");
  
       });
     });
  });
  

  Подробнее

  ответ дан Daniel Nyamasyo, с репутацией 981, 19.07.2016
• 8 рейтинг

  Преобразование файла в base64 с использованием | HTML5's readAsDataURL () или некоторого кодировщика base64 . Скрипка здесь

  var reader = new FileReader();
  
          reader.onload = function(readerEvt) {
              var binaryString = readerEvt.target.result;
              document.getElementById("base64textarea").value = btoa(binaryString);
          };
  
          reader.readAsBinaryString(file);
  

  Затем извлечь:

  window.open("data:application/octet-stream;base64," + base64);
  

  ответ дан tnt-rox, с репутацией 3969, 23.06.2014
• 7 рейтинг

  Вы можете использовать

  $(function() {
      $("#file_upload_1").uploadify({
          height        : 30,
          swf           : '/uploadify/uploadify.swf',
          uploader      : '/uploadify/uploadify.php',
          width         : 120
      });
  });
  

  Демонстрация

  ответ дан Amit, с репутацией 1159, 12.05.2014
• 5 рейтинг

  Ищите Обработка процесса загрузки для файла, асинхронно здесь: https: // разработчик. Mozilla. org / en-US / docs / Using_files_from_web_applications

  Образец по ссылке

  Drag & drop your file here...

  ответ дан Allende, с репутацией 1100, 8.07.2015
• 4 рейтинг

  Это моё решение.

  Description

  и JS

  Контроллер

  [HttpPost]
  public ActionResult Save(string apta_Description, HttpPostedFileBase file)
  {
      return Json(":)");
  }
  

  ответ дан Erick Langford Xenes, с репутацией 834, 3.11.2015
• 3 рейтинг

  Современный подход без Jquery - это использование объекта FileList , который вы возвращаете из , когда пользователь выбирает файл (-ы) и затем использует Fetch , чтобы опубликовать объект FileList, обернутый вокруг формы 3961684545 из 398165455.

  // The input DOM element
  const inputElement = document.querySelector('input');
  
  // Listen for a file submit from user
  inputElement.addEventListener('change', () => {
      const data = new FormData()
      data.append('file', inputElement.files[0])
      data.append('imageName', 'flower')
  
      // Post to server
      fetch('/uploadImage', {
          method: 'POST',
          body: data
      })
  });
  

  ответ дан Alister Norris, с репутацией 8493, 17.08.2018
• 3 рейтинг

  Использование HTML5 и JavaScript , асинхронная загрузка довольно проста, я создаю логику загрузки вместе с вашим html, это не полностью работает, так как требует API, но продемонстрирую, как это работает, если у вас есть конечная точка с именем /upload от корня вашего сайта, этот код должен работать для вас:

  const asyncFileUpload = () => {
    const fileInput = document.getElementById("file");
    const file = fileInput.files[0];
    const uri = "/upload";
    const xhr = new XMLHttpRequest();
    xhr.upload.onprogress = e => {
      const percentage = e.loaded / e.total;
      console.log(percentage);
    };
    xhr.onreadystatechange = e => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        console.log("file uploaded");
      }
    };
    xhr.open("POST", uri, true);
    xhr.setRequestHeader("X-FileName", file.name);
    xhr.send(file);
  }

  File

  Также некоторая дополнительная информация о XMLHttpReques:

  Объект XMLHttpRequest

  Все современные браузеры поддерживают объект XMLHttpRequest. Объект XMLHttpRequest может использоваться для обмена данными с сетью. сервер за кадром. Это означает, что можно обновить части веб-страницы, без перезагрузки всей страницы.

  


  Создание объекта XMLHttpRequest

  Все современные браузеры (Chrome, Firefox, IE7 +, Edge, Safari, Opera) имеют встроенный объект XMLHttpRequest.

  Синтаксис для создания объекта XMLHttpRequest:

  переменная = новый XMLHttpRequest ();

  


  Доступ через домены

  Из соображений безопасности современные браузеры не разрешить доступ через домены.

  Это означает, что и веб-страница, и XML-файл, который он пытается загрузить, должен быть расположен на том же сервере.

  В примерах в W3Schools все открытые файлы XML, расположенные в W3Schools домен.

  Если вы хотите использовать приведенный выше пример на одной из ваших собственных веб-страниц, Загружаемые вами XML-файлы должны находиться на вашем собственном сервере.

  Для получения более подробной информации, вы можете продолжить чтение здесь . , ,

  ответ дан Alireza, с репутацией 39782, 12.03.2018
• 2 рейтинг

  Вы можете использовать более новый Fetch API от JavaScript. Как это:

  function uploadButtonCLicked(){
      var input = document.querySelector('input[type="file"]')
  
      fetch('/url', {
        method: 'POST',
        body: input.files[0]
      }).then(res => res.json())   // you can do something with response
        .catch(error => console.error('Error:', error))
        .then(response => console.log('Success:', response));
  }                               
  

  Преимущество: Fetch API - это , изначально поддерживаемая всеми современными браузерами, поэтому вам не нужно ничего импортировать. Также обратите внимание, что fetch () возвращает Promise , который затем обрабатывается асинхронно с использованием .then(..code to handle response..).

  ответ дан BlackBeard, с репутацией 4218, 21.05.2018
• 1 рейтинг

  Это старый вопрос, но все еще нет правильного ответа, поэтому:

  Вы пробовали jQuery-File-Upload ?

  Вот пример по ссылке выше - & gt; 1 , которые могут решить вашу проблему:

  $('#fileupload').fileupload({
      add: function (e, data) {
          var that = this;
          $.getJSON('/example/url', function (result) {
              data.formData = result; // e.g. {id: 123}
              $.blueimp.fileupload.prototype
                  .options.add.call(that, e, data);
          });
      } 
  });
  

  ответ дан LAT94, с репутацией 68, 21.02.2018
• 0 рейтинг

  Вы можете выполнять асинхронную загрузку нескольких файлов, используя JavaScript или jQuery, и это без использования какого-либо плагина. Вы также можете отобразить прогресс загрузки файла в реальном времени в элементе управления прогрессом. Я натолкнулся на 2 хорошие ссылки -

  1. ASP. Функция многократной загрузки файлов на основе веб-форм NET с индикатором выполнения
  2. ASP. NET MVC на основе загрузки нескольких файлов в jQuery

  Серверный язык - C #, но вы можете внести некоторые изменения, чтобы он работал с другим языком, таким как PHP.

  Загрузка файла ASP. NET Core MVC:

  В представлении создания элемента управления загрузкой файлов в формате html:

  Submit

  Теперь создайте метод действия в вашем контроллере:

  [HttpPost]
  public async Task Add(IFormFile[] mediaUpload)
  {
      //looping through all the files
      foreach (IFormFile file in mediaUpload)
      {
          //saving the files
          string path = Path.Combine(hostingEnvironment.WebRootPath, "some-folder-path"); 
          using (var stream = new FileStream(path, FileMode.Create))
          {
              await file.CopyToAsync(stream);
          }
      }
  }
  

  переменная hostingEnvironment имеет тип IHostingEnvironment, который можно внедрить в контроллер с помощью внедрения зависимости, например:

  private IHostingEnvironment hostingEnvironment;
  public MediaController(IHostingEnvironment environment)
  {
      hostingEnvironment = environment;
  }
  

  ответ дан Joe Clinton, с репутацией 44, 29.08.2018