Введение
Используя объект FileReader, веб -приложения могут асинхронно читать содержимое файлов (или необработанных данных данных), хранящегося на компьютере пользователя, и могут использовать файловые объекты или объекты Blob для указания файла или данных, которые будут обработаны. Объект файла может быть от объекта FileList, возвращаемого пользователем после выбора файла на элементе <input type = "text" /> или из объекта DataTransfer, сгенерированного операцией перетаскивания или от результата возврата после выполнения метода MozgetAsFile () на HTMLCanVaselement.
Несколько страниц, загрузите несколько демонстрационных кодов
<! Doctype html> <html> <head> <title> Загрузите изображение, чтобы отобразить изображение предварительного просмотра </title> <style> #Result img {height: 100px; дисплей: встроенный блок; Право маржи: 10px; маржинальный бат: 10px; } </style> </head> <body> <div> <p> <pabel> Выберите файл изображения: </label> <input type = "file" id = "file_input" style = "display: none;" /> </p> <div id = "result"> <a href = "javascript: void (0);"> Добавить изображение </a> </div> </div> <div> <p> <pabel> Пожалуйста, выберите файл изображения: </label> <input type = "file" id = "file_input" style = "disploy: none;" /> </p> <div id = "result"> <a href = "javascript: void (0);"> Добавить изображение </a> </div> </div> <script src = "jquery-2.2.1.min.js"> </script> <Script> $ (". Add_IMG_BTN"). $ (this) .parents (". add_imgs"). Найти ("input [type = file]"). Click (); «Извините, ваш браузер не поддерживает FileReader»; input.setattribute ('отключить', 'отключить'); } else {$ (input) .unbind ("change"). On ("change", function () {var file = this.files [0]; if (!/image /// w+/. test (file.type)) {alert ("файл должен быть изображением!"); return false;} vareer = new filereader (); function (e) {$ (result) .append ('<img src = "'+this.result+'"/>');Выше приведено все об этой статье, и я надеюсь, что для всех будет полезно изучить программирование JavaScript.