В этой статье рассказывается, как преобразовать абсолютный путь к изображению в файловый объект в HTML5 и поделиться им со всеми. Подробности следующие:
Чтобы преобразовать абсолютный путь к изображению в кодировку Base64, прочтите эту статью.
Давайте сначала разберемся с базовыми знаниями:
1. Познакомьтесь с объектом FileList и объектом файла в HTML5.В HTML5 объект FileList представляет список файлов, выбранных пользователем. Добавив атрибут multipe, можно одновременно выбрать несколько файлов в элементе управления файлами. Каждый выбранный пользователем файл в элементе управления представляет собой файловый объект, а объект FileList представляет собой список файловых объектов. Представляет все файлы, выбранные пользователем. Давайте сначала посмотрим на простую демонстрацию, чтобы увидеть, какие атрибуты имеет файловый объект. Следующий код:
<!DOCTYPE html><html> <head> <title>файловая система:URL</title> </head> <body> <div> <label>Выберите:</label> <input type='file' Multiple id= file /> <input type=button value=File upload onClick=showFile() /> </div> <script> function showFile() { var files = document.getElementById('file').files // Вернуть все выбранные файлы for (var i = 0, ilen = files.length; i < ilen; i++) { // Распечатать информацию об одном файловом объекте console.log(files[i]); информация следующая: Файл {lastModified: 1457946612000 LastModifiedDate: Пн, 14 марта 2016 г., 17:10:12 GMT+0800 (CST) {} имя: test.html размер: 796 тип: text/html webkitRelativePath: */ /* Если изображение загружено, будет возвращена следующая информация: File {lastModified: 1466907500000 LastModifiedDate: Sun, 26 июня 2016 г. 10: 18:20 GMT+0800 (CST) {} имя: размер a.jpg: 23684 type: image/jpeg webkitRelativePath: } */ /* Поэтому, если вам нужно определить, является ли загруженный файл файлом изображения, вы можете судить по типу следующим образом: var file = files[i]; /image// /w+/.test(file.type)) { console.log('Этот файл не является файлом изображения'); else { console.log('Этот файл является файлом изображения'); Но если вы хотите передавать только изображения, вы можете добавить атрибут Accept=image/* к элементу управления изображением, мы можем написать код следующим образом: <input type='file' Multiple Accept = 'image/gif,image/jpeg; ,image/ jpg,image/png' /> */ } } </script> </body></html> 2. Понимание объектов BlobКлючевые моменты: в HTML5 добавляется новый объект Blob для представления исходных двоичных данных. Фактически, файловый объект также наследует объект Blob.
Объект Blob имеет два атрибута: атрибут size представляет длину объекта Blob в байтах, а атрибут type представляет тип MIME Blob. Если это неизвестный тип, возвращается пустая строка.
Пожалуйста, посмотрите на следующий код:
<!DOCTYPE html><html> <head> <title>файловая система:URL</title> </head> <body> <div> <label>Выберите файл:</label> <input type=file id=file / > <input type=значение кнопки=Показать информацию о файле при клике=showFileType() /> <p>Длина файла в байтах: <span id=size></span></p> <p>Тип файла: <span id=type></span></p> </div> <script> function showFileType() { var file // Получаем первый файл, выбранный пользователем file = document.getElementById('file').files[ 0]; var size = document.getElementById('size'); var type = document.getElementById('type'); // Отображение длины файла в байтах size.innerHTML = file.size; Отображение типа файла type.innerHTML = file.type // Откройте консоль для просмотра возвращенного файлового объекта console.log(file);Примечание. Blob и File можно использовать одновременно, а FileReader можно использовать для чтения данных из Blob.
Ниже приведен адрес изображения с абсолютным путем, который преобразуется в изображение в кодировке Base64, а затем изображение в кодировке Base64 преобразуется в объект BLOB-объекта. Код выглядит следующим образом:
<!DOCTYPE html><html> <head> <title>Преобразовать данные URL-адреса изображения в формате Base64 в Blob</title> </head> <body> <script> /** * Преобразовать данные URL-адреса изображения в формате Base64 Для Blob * @param urlData * данные изображения base64, выраженные в режиме URL */ function ConvertBase64UrlToBlob(base64){ var urlData = base64.dataURL type =; base64.type; var bytes = window.atob(urlData.split(',')[1]); //Удаляем заголовок URL-адреса и преобразуем его в байт //Обрабатываем исключения и преобразуем ascii-код меньше 0 в больше 0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : type} } /* * Преобразование абсолютного пути изображения в кодировку base64 следующим образом: */ function getBase64Image(img) { var холст = document.createElement(canvas); холст.ширина = img.width; холст.высота = img.height; Canvas.getContext(2d); ctx.drawImage(img, 0, 0, img.width, img.height); var ext = img.src.substring(img.src.lastIndexOf(.)+1).toLowerCase(); вар dataURL = Canvas.toDataURL(изображение/+расширение); return { dataURL: dataURL, тип: изображение/+расширение; }; вар img = https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg; вар изображение = новое изображение (); image.src = image.onload = функция; () { var base64 = getBase64Image(image); Информация о печати следующая: { dataURL: data:image/png;base64,xxx type: image/jpg } */ var img2 = ConvertBase64UrlToBlob(base64); /* Информация о печати следующая; : Blob {размер: 9585, тип: image/jpg} */ } </script> </body></html>Примечание. В HTML5 добавляется новый объект Blob для представления исходных двоичных данных. Фактически объект файла также наследует объект Blob. Поэтому мы можем использовать абсолютный адрес изображения, чтобы преобразовать его в файловый объект.
Поэтому мы можем использовать абсолютный адрес изображения, чтобы преобразовать его в файловый объект. Подробную демонстрацию вы можете увидеть в моем git. Плагин сначала поддерживает загрузку изображений, а потом я вдруг обнаружил это. когда я захожу на страницу редактирования, мне нужно отобразить изображение по умолчанию. При этом поддерживается продолжение загрузки новых изображений при отображении изображений по умолчанию или удаление всех изображений. Однако разработчик только предоставил. мне абсолютный адрес изображения, поэтому мне было интересно, как преобразовать абсолютный адрес изображения в файловый объект. Если я не конвертирую, если он становится файловым объектом, при использовании этого кода var Reader =. new FileReader(); сообщит об ошибке, поэтому вы можете использовать объект blob, о котором мы говорили выше, чтобы сначала преобразовать его в объект blob, а затем использовать объект файловой операции fileReader.
Подробный код см. в разделе управления загрузкой изображений в моем git (https://github.com/tugenhua0707/html5UploadImage). Эффект см. на странице https://tugenhua0707.github.io/html5UploadImage/index.html.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.