HTML5 FormData Метод Введение и Файлы реализации в файле реализации

Xmlhttprequest - это интерфейс браузера. Xmlhttprequest - это обычно используемый способ взаимодействия данных в настоящем браузере. В феврале 2008 года был предложен уровень XMLHTTPREQUEST 2, по сравнению с предыдущим поколением, он имеет некоторые новые функции. что вы можете загрузить двоичные файлы. Давайте представим, как загружать файлы с помощью FormData.

Сначала посмотрите на основной способ FormData: FormData Object, вы можете сформировать запрос всех элементов и значения таблицы и отправить его на фон. Просто передайте форму формы в виде параметра в конструктор FormData:

 var form = document.getElementbyId (form1);

Таким образом, FD можно отправить непосредственно через метод ajax send () на фон.

Следующая форма создается.

 <Form name = form1 id = form1> <p> Имя: <input type = text name = name /> <p> пол: <input type = radio name = гендерное значение = 1 /> male <input type = radio name = Гендерное значение = 2 /p> женское < /p> <p> stu-number: <input type = text name = number /> < /p> <p> Фото: <input type = имя файла = фото идентификатор = фото> </P> <p> <input type = кнопка name = b1 value = spect onclick = fsubmit ()/p> </form> <div id = result> </div>

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

Для простого мы все еще используем Ajax, инкапсулированный JQUERY для передачи данных на фоновое значение:

 Функция fsubmit () {var form = document.getElementById (form1); Скажите JQUERY Не обработайте ContentType Data ejson (response); + json ['number']; .html (result);}});

Server.php в приведенном выше коде - это файл сервера, получение запроса AJAX и возврата результата приема.

 <? Isset ($ _ post ['number'])? [name '] = $ name; '] = false;} echo json_encode ($ response);?>

После заполнения информации нажмите «Отправить», чтобы получить следующие эффекты на странице.

Если вы являетесь местным энтузиастом JavaScript, конечно, приведенные выше функции могут быть достигнуты.

 Функция fsubmit () {var form = document.getelementbyid (form1); (olq. ReadyState == 4) {if (oreq.status == 200) {console.log (typeof oreq.responsetext); Личная информация: <br/> Имя:+json ['name']+<br/> Пол:+json ['gender']+<br/> number:+json ['number']; <<< br /> avatar: <img src = ' + json [' photo '] +' height = 50 Style = Border-Radius: 50%; post, server.php);

В дополнение к новым объектам выше форматы, форма напрямую передается в параметр, и есть и другие функции. В большинстве статей, представленных FormData в Интернете только метод Apend (). Давай консоль узнают:

После консоли у нас есть крупное открытие.

Метод append () используется для добавления значений ключей в объект FormData:

 fd.append ('key1', value1);

FD является объектом FormData, который может быть вновь построен.

Установите значение значения клавишу клавиши соответствующего ключа

 fd.set ('key1', value1);

Он выглядит немного похоже на метод Append (). Все еще сравнитесь с примером, мы основываемся на форме опережаемой формы.

 fd.append ('имя', Уилл);

Два ключа - это значение ключа имени:

 fd.set ('name', Will);

Только один ключ - это значение ключа имени:

Вышеуказанное - это разница между Append () и set (). Если набор установленных значений не существует, эффект двух одинаково.

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

 fd.Append ('name', 'Will');

Информация по имени в форме и вновь добавленная информация имени через Append () была удалена.

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

На основе вышеуказанной формы:

 Fd.Append ('name', 'Will');

 fd.Append ('name', 'Will');

Этот метод также получает параметр, который также является именем ключа, возвращая логическое значение, чтобы определить, содержит ли объект FormData ключ. Приведенная выше форма является примером:

 Console.log (fd.has ('name'));

Этот метод не должен получать параметры, и возвращать итератор. Приведенная выше форма является примером:

 for (var key of fd.keys ()) {console.log (key);}

Результат:

имя

пол

число

Фото

Конечно, с итерацией ключа необходимо переселить итератор значения. Значения () является итератором значения.

 for (var value of fd. values ​​()) {console.log (value);}

результат:

Есть итератор, который проходит ключ, и есть также итераторы стоимости, почему бы не общаться в двух вместе! Intisers () должен вернуть итератор, содержащую пару значений ключей:

 для (var pair fd.entries ()) {console.log (pair [0]+ ','+ pair [1]);}

результат:

Поскольку FormData является новым интерфейсом xmlhttprequest уровня 2, браузер IE, который сейчас ниже, чем IE10, не поддерживает FormData. Рисунок ниже:

Выше всего содержимое этой статьи.