Функция предварительного просмотра загрузки изображения в основном используется для предварительного просмотра эффекта перед загрузкой изображения. В настоящее время основные методы в основном включают реализацию JS, JQUERY и Flash, но мы обычно используем JS для реализации функции предварительного просмотра загрузки изображения. Давайте посмотрим на пример ниже.
принцип:
Он разделен на два шага: когда ввод загрузки изображения запускается и выбирается локальное изображение, URL (URL -адрес объекта) объекта будет загружен; Назначьте URL-адрес объекта атрибуту SRC предварительно написанного тега IMG для отображения изображения.
Здесь нам нужно понять метод файла, объект Blob и Window.url.createObjectUrl () в JavaScript.
Файл объект:
Объект файла может использоваться для получения информации о файле, а также может использоваться для чтения содержимого файла. Как правило, объект файла находится от объекта FileList, возвращаемого пользователем после выбора файла на входном элементе, или он может быть объектом Datatransfer, сгенерированным бесплатными операциями перетаскивания и выбросов.
Давайте посмотрим на получение объекта FileList:
Кода -копия выглядит следующим образом:
<script type = "text/javascript" src = "jquery.js"> </script>
<input id = "upload" type = "file">
<img id = "preview" src = "">
<script type = "text/javascript">
$ ('#upload'). изменить (function () {
// Получить первый элемент FileList
alert (document.getElementbyId ('upload'). файлы [0]);
});
</script>
Blob Object:
Объект Blob-это файловый объект, содержащий необработанные данные только для чтения. Данные в объекте Blob не обязательно должны быть собственной формой в JavaScript. Файл -интерфейс основан на Blob, наследует функции Blob и расширяется для поддержки локальных файлов на компьютере пользователя.
URL -адрес объекта, который мы хотим получить, фактически получен из объекта Blob, потому что интерфейс файла наследует каплей. Вот превращение объекта Blob в URL:
Кода -копия выглядит следующим образом:
<script type = "text/javascript">
var f = document.getElementById ('upload'). файлы [0];
var src = window.url.createObjecturl (f);
document.getElementbyId ('preview'). src = src;
</script>
совместимость:
Приведенный выше метод подходит для браузера Chrome
Если это браузер IE, вы можете напрямую использовать входное значение вместо SRC
При просмотре информации в Интернете вы можете напрямую использовать метод getAsDataurl () объекта файла для получения URL. Теперь этот метод был отменен. Точно так же есть методы getaStext () и getAsbinary (). Давайте посмотрим на такой пример.
Кода -копия выглядит следующим образом:
Функция getFullPath (obj) {// Получить полный путь к изображению
if (obj) {
// т.е.
if (window.navigator.useragent.indexof ("msie")> = 1) {
obj.select ();
return document.selection.createrange (). Text;
}
// Firefox
else if (window.navigator.useragent.indexof ("firefox")> = 1) {
if (obj.files) {
return obj.files.item (0) .getasDataurl ();
}
вернуть obj.value;
}
вернуть obj.value;
}
}
Этот код является полным путем для получения изображения клиента
Мы ограничим его размер и формат
Кода -копия выглядит следующим образом:
$ ("#loadfile"). изменить (function () {
var strsrc = $ ("#loadfile"). val ();
img = новое изображение ();
img.src = getfullpath (strsrc);
// Убедитесь, что формат файла загрузки правильный
var pos = strsrc.lastindexof (".");
var lastname = strsrc.substring (pos, strsrc.length)
if (lastname.tolowercase ()! = ".jpg") {
ALERT («Тип файла, который вы загружаете, -« + lastName + », изображение должно быть от JPG -типа»);
вернуть ложь;
}
// Проверьте соотношение сторон загруженного файла
if (img.height / img.width> 1,5 || img.height / img.width <1.25) {
оповещение («Доля загруженного вами изображения находится за пределами диапазона, а соотношение сторон должно быть между 1,25-1,5»);
возвращаться;
}
// Проверьте, является ли загруженный файл негабаритным
if (img.filesize / 1024> 150) {
Alert («Размер файла, который вы загружаете, превышает ограничение 150K!»);
вернуть ложь;
}
Среди них LoadFile является идентификатором входного файла HTML. После того, как его событие изменения, то есть после выбора файла для загрузки, пусть изображение будет отображаться в поле изображения? Добавьте следующий код в конце вышеуказанного кода
Кода -копия выглядит следующим образом:
$ ("#stopric"). attr ("src", getfullpath (это));
Поскольку jQuery используется, давайте поделимся примером кода, написанном в JQUERY:
Кода -копия выглядит следующим образом:
<html xmlns = "http://www.w3.org/1999/xhtml">
<Head Id = "Head1">
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<script type = "text/javascript" src = "jquery.js"> </script>
<script language = "javascript">
$ (function () {
var ei = $ ("#большой");
ei.hide ();
$ ("#img1"). MouseMove (function (e) {
ei.css ({top: e.pagey, слева: e.pagex}). html ('<img style = "border: 1px solid grey;" src = "' + this.src + '" />'). Show ();
}). Mouseout (function () {
ei.hide ("медленно");
})
$ ("#f1"). изменение (function () {
$ ("#img1") .attr ("src", "file: ///"+$ ("#f1") .val ());
})
});
</script>
<стиль типа = "text/css">
#large {позиция: Absolute; Display: None; z-Index: 999;}
</style>
</head>
<тело>
<form name = "form1" id = "form1">
<div id = "demo">
<input id = "f1" name = "f1" type = "file" />
<img id = "img1">
</div>
<div id = "большой"> </div>
</form>
</body>
</html>