В этой статье разделяют три метода загрузки Java Asynchronous для вашей ссылки. Конкретный контент заключается в следующем
Первый метод для загрузки с использованием плагина браузера требует определенного базового навыка кодирования. Я не буду говорить об этом здесь, чтобы не вводить детей в заблуждение. Если вы рассмотрите это, вы можете самостоятельно Baidu.
Второй тип использует скрытую iframe для имитации асинхронных загрузок . Почему мы говорим о симуляции здесь? Поскольку мы на самом деле вкладываем результат возврата в скрытый iframe, поэтому мы не сделали текущий прыжок страницы, который казался асинхронной операцией.
<! Doctype html> <html> <head> <meta charset = "UTF-8"> <Title> скрытый файл загрузки iframe </title> <script type = "text/javascript" src = "jquery path ..."> </script> </head> <body> <iframe = "frm". action = "/upload2" enctype = "multipart/form-data" method = "post" target = "frm" onsubmit = "загрузка (true);"> <p id = "upfile"> Прикрепление: <input type = "file" name = "myfile" style = "display: inline"> </p> <p id = " 50px; " type = "отправить" value = "asynchronous upload"> <span id = "uptxt" style = "display: none"> загрузка ... </span> </p> </form> <div id = "flist" style = "граница: 1px dected darkgray;"> </div> <script> // функция обратного вызовов. загрузка (false); } функция addTOFLIST (fname) {var temp = ["<p id = '" + fname + "'>", fname, "<button onclick = 'delfile (/" " + fname +"/");'> Delete </button>", "</p>"]; $ ("#flist"). Append (temp.join ("" "));} функция загрузка (Showloading) {if (showloading) {$ ("#uptxt "). Show (); } else {$ ("#uptxt"). Hide; }} </script> </body> </html> В этой технологии есть два ключевых момента:
1. Форма будет указывать цель, и отправленный результат будет возвращен в скрытый iframe. (т.е. цель формы согласуется с атрибутом имени iframe).
2. После завершения представления страница в IFRAME связана с главной страницей. Как уведомить результат загрузки и информация о файле сервера общаться с основной страницей?
После получения файла мы используем Nodejs для возврата метода, определяемого Window.parent. Главная страница. После выполнения мы можем знать, что загрузка файла завершена. Код очень прост:
router.post ('/upload2', multipartmiddleware, function (req, res) {var fpath = req.files.myfile.path; var fname = fpath.substr (fpath.lastistexof ('//') + 1); settimeout (function {var ret = ["<cript>", "// ') + 1); ");", "</script>"]; После выполнения вы можете открыть опцию разработчика, и вы обнаружите, что некоторые данные, возвращаемые из скрытой iframe, возвращаются.
Третий тип использует xmlhttprequest2 для реальной асинхронной загрузки .
Или сначала опубликуйте код:
После выполнения вы можете открыть опцию разработчика, и вы обнаружите, что некоторые данные, возвращаемые из скрытой iframe, возвращаются. Третий тип использует xmlhttprequest2 для реальной асинхронной загрузки. Давайте сначала опубликуем код:
<! Doctype html> <html> <head> <meta charset = "UTF-8"> <Title> xhr level2 asynchronous upload </title> <script type = "text/javascript" src = "jquery path ..."> </script> </head> <dobod> <div> <p id = "upfile"> atture: "</head> <doby> <div> <p id =" upfile " id = "myfile" style = "display: inline"> </p> <p id = "upbtn"> <input style = "ladding-left: 50px; правом накладка: 50px;" type = "кнопка" value = "asynchronous upload" onclick = "upload;"> <span id = "uptxt" style = "display: none"> загрузка ... </span> <span id = "upprog"> </span> <button id = "stopbtn" style = "Disploge none;"> Stop uplog </pttonted> </p> </div> <div Id = "vlyt styt styt styt styt styt". Darkgray; "> </div> <script> upload {// 1. Подготовьте FormData var fd = new FormData; fd.append ("myfile", $ ("#myfile") [0] .files [0]); // Создать объект XHR var xhr = new xmlhttprequest; // Слушайте статус и ответьте в реальном времени // xhr и xhr.upload. console.log ('%d%', процент); $ ("#upprog"). Текст (процент); }}; // start start event xhr.onloadstart = function (event) {console.log ('загрузка старта'); $ ("#upprog"). Text ('Start ulload'); $ ("#stopbtn"). One ('click', function {xhr.abort; $ (this) .hide ();}); загрузка (правда); }; // процесс Ajax успешно завершил событие xhr.onload = function (event) {console.log ('uccess' ’); $ ("#upprog"). Text ('загрузить успех'); console.log (xhr.responsetextext); var ret = json.parse (xhr.responsetext); addTofList (ret.fname); }; // событие ошибки произошло в процессе AJAX xhr.onerror = function (event) {console.log ('error'); $ ("#upprog"). Text ('ошибка произошла'); }; // ajax отменен xhr.onabort = function (event) {console.log ('abort'); $ ("#upprog"). Текст («Операция была отменена»); }; // заканчивается передача Loadend, и она будет запускаться независимо от успеха или сбоя xhr.onloadend = function (event) {console.log ('end load'); загрузка (false); }; // Инициировать запрос AJAX для передачи данных xhr.open ('post', '/upload3', true); xhr.send (fd); } функция addTOFLIST (fname) {var temp = ["<p id = '" + fname + "'>", fname, "<button onclick = 'delfile (/" " + fname +"/");'> Delete </button>", "</p>"]; $ ("#flist"). Append (temp.join ("" ")); } function delfile (fname) {console.log ('для удаления файла:' + fname); // todo: пожалуйста, реализуйте} функцию загрузки (Showloading) {if (showloading) {$ ("#uptxt"). Show (); $ ("#stopbtn"). Show (); } else {$ ("#uptxt"). hide (); $ ("#stopbtn"). Hide (); }} </script> </body> </html> Есть много кода, но его легко понять. Любой, кто использовал Ajax, знает, что объекты XHR предоставляют метод обратного вызовов OneReadyStateChange для прослушивания всего процесса запроса/ответа. Есть еще несколько событий прогресса в спецификации уровня 2 Xmlhttprequest. Ниже 6 событий:
1. Нагрузка: запускается при получении первого байта данных ответа.
2. ПРОГРАММА: он непрерывно запускается во время приема ответа.
3.error: запускается, когда в запросе возникает ошибка.
4. АБОРТ: запускается при прекращении соединения из -за вызова метода прервания.
5. Нагрузка: запускается при получении полных данных ответа.
6. Нагрузка: запускается после завершения связи, или запускается ошибка, прерывание, события загрузки.
На этот раз мы можем интерпретировать код: когда начинается событие передачи, мы добавляем событие Click в кнопку «Стоп передачи», и встроенный метод аборта может остановить передачу. Если вы не нажимаете, он будет загружаться нормально до тех пор, пока передача не будет завершена. Его фоновый код аналогичен второму методу.
Три метода имеют свои преимущества и недостатки, давайте сделаем простое резюме.
Сторонние элементы управления имеют хорошую интерактивность и управляемость, потому что они близки к нижнему слою, и их производительность также превосходна. Однако, поскольку это трудно писать, вам обычно нужно установить плагины самостоятельно, и иногда вам может потребоваться написать их самостоятельно.
Я лично думаю, что скрытый метод iframe - очень вдумчивый метод. Iframe может помочь нам сделать много вещей. Этот подход имеет обширную совместимость браузера и не требует установки плагинов. Тем не менее, он обладает плохой интерактивностью, неконтролируемым процессом загрузки, и его производительность также очень средняя.
Для загрузки чистого уровня XHR2 он должен иметь браузер с более высокой версией (IE9+). Но у него очень хорошая взаимодействие, вы можете увидеть прогресс загрузки и управляемый.
Развитие может быть сделано по -разному в соответствии с требованиями. Я лично думаю, что загрузка этих файлов, особенно второй, дает своего рода идею, которая полностью использует характеристики некоторых тегов HTML, может быть чем -то, что наши разработчики должны думать больше.
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.