Краткая запись некоторых кодов, которые загружают H5 сегодня утром, и все еще есть подводные камни
1. Дисплей
Потому что фронтальный файл загрузки должен проходить через форму формы, а Ajax не может быть использован. Таким образом, на самом деле нехорошо размещать ввод с файлом типа на мобильной странице. Как показано на рисунке ниже, очень расстраивает ли это?
После поиска решения некоторые ПК заменили этот ввод на Flash, используя библиотеку инструментов JQuery, такую как загрузка, но большинство мобильных браузеров не поддерживают Flash. Таким образом, окончательный метод состоит в том, чтобы использовать форму формы, просто установите прозрачность формы и ввода на 0, чтобы они находились в DIV, причем контент готов к отображению, и отображаемый содержимое можно сделать так, как вы хотите. Код заключается в следующем:
<! Doctype html> <html> <head> <meta charset = "utf-8"> <meta name = "viewport" content = "width = width device, начальная шкала = 1.0, пользовательский шкалевый = no"> <title> </title> <style> div {width: 100%;} .logo img {display: block; Маржа: 0 auto;} .Upload {позиция: относительная; ширина: 80px; высота: 18px; линейная-высота: 18px; фон: #2fc7c9; text-align: center; Цвет: #fff; Padding: 0px 5px; -webkit-border-radius: 2px; граница-радиус: 2px; Поле: 0 Авто; } .Upload form {width: 100%; позиция: абсолют; слева: 0; Верх: 0; непрозрачность: 0; Фильтр: Alpha (opatice = 0);}.Внешний вид, как показано на рисунке, поэтому он отображается в P-Tag «Загрузка изображения». Нажатие на него даст вам эффект выбора файла
2. Код JS
Я написал это довольно просто, просто используя основные функции загрузки H5
HTML -код выглядит следующим образом, действие - это путь к запросу. Я делаю здесь, чтобы загрузить и изменить аватар при изменении файла. Атрибут имени входного тега не может быть опущен, он связан с бэкэнд -интерфейсом.
<form id = "uploadform" ectype = "multipart/form-data" method = "post" action = "xxxxxx"> <input type = "file" name = "imagefile" id = "imagefile" onchange = "fileselected ()"/> </form> form>
var imaxfilesize = 2097152; //2mwindow.fileselected = function () {var Ofile = document.getElementById ('ImageFile'). Файлы [0]; // Читать файл var rfilter =/^(image // bmp | image // GIF | Image // JPEG | Image // PNG | Image // tiff) $/i; if (! rfilter.test (ofile.type)) {alert ("Формат файла должен быть изображением"); возвращаться; } if (ofile.size> imaxFilesize) {alert («Размер изображения не может превышать 2M»); возвращаться; } var vfd = new FormData (document.getElementById ('uploadform')), // Создание запроса и данных oxhr = new xmlhttprequest (); oxhr.addeventListener ('Load', function (resupload) {// success}, false); oxhr.addeventListener ('error', function () {// не удастся}, false); oxhr.addeventlistener ('abort', function () {// загружать прерывание}, false); oxhr.open ('post', actionUrl); oxhr.send (vfd);};Детали определяют успех или неудачу, поэтому вы должны воспринимать все всерьез.
Выше приведено в этой статье, я надеюсь, что это будет полезно для каждого обучения.