Комментарий: Эта статья в основном представляет конкретную реализацию HTML5, чтение локальных файлов. Стиль структуры HTML, стиль CSS и код JS следующие. Друзья, которые это нужно, могут посмотреть
Стиль структуры HTML выглядит следующим образом:<div>
<Кнопка> Добавить изображение </button>
<форма>
<input type = "file" Multy Accept = "Image/*">
</form>
</div>
<img src = "">
С точки зрения стиля, ящик ввода входного элемента не должен отображаться. В настоящее время вход должен быть установлен в прозрачный стиль, а затем перезаписать его над элементом кнопки. Только тогда можно нажать на кнопку, чтобы загрузить изображение. Установите, принятое в Image/*, разрешены только загрузки файлов изображений.
Стиль CSS выглядит следующим образом
.addpic {
позиция: относительно;
Полевая левая: 100px;
Ширина: 95px;
Высота: 30px;
}
.Addlogo {
Фон: нет повторить прокрутку 0 0 rgba (0, 0, 0, 0);
курсор: указатель;
размер шрифта: 30px;
непрозрачность: 0;
позиция: абсолютно;
Справа: 0;
Верх: 0;
z-index: 10;
}
JS -код
функция readfiles (evt) {
var files = evt.target.files;
if (! files) {
console.log («Файл invaild»);
возвращаться;
}
for (var i = 0, file; file = file [i]; i ++) {
var Imgele = new Image ();
var thesrc = window.url.createObjecturl (file);
imgele.src = thesrc;
imgele.onload = function () {
$ ("#showlogo"). attr ("src", this.src);
}
}
}
$ (document) .ready (function () {
$ ("#logoImg"). изменить (e) {
readfiles (e)
});
});