转自MDN:
<!doctype html>
<html>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
<title>Image preview example</title>
<script type="text/javascript">
var loadImageFile = (function () {
if (window.FileReader) {
var oPreviewImg = null, oFReader = new window.FileReader(),
rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
oFReader.onload = function (oFREvent) {
if (!oPreviewImg) {
var newPreview = document.getElementById("imagePreview");
oPreviewImg = new Image();
oPreviewImg.style.width = (newPreview.offsetWidth).toString() + "px";
oPreviewImg.style.height = (newPreview.offsetHeight).toString() + "px";
newPreview.appendChild(oPreviewImg);
}
oPreviewImg.src = oFREvent.target.result;
};
return function () {
var aFiles = document.getElementById("imageInput").files;
if (aFiles.length === 0) { return; }
if (!rFilter.test(aFiles[0].type)) { alert("You must select a valid image file!"); return; }
oFReader.readAsDataURL(aFiles[0]);
}
}
if (navigator.appName === "Microsoft Internet Explorer") {
return function () {
document.getElementById("imageInput").select();
var imgSrc = document.selection.createRange().text;
document.getElementById("imagePreview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc
// 注意：IE8不支持直接赋值 src = document.getElementById("imageInput").value;
}
}
})();
</script>
<style type="text/css">
#imagePreview {
width: 160px;
height: 120px;
float: right;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(true,sizingMethod=scale);
}
</style>
</head>
<body>
<div id="imagePreview"></div>
<form name="uploadForm">
<p><input id="imageInput" type="file" name="myPhoto" onchange="loadImageFile();" /><br />
<input type="submit" value="Send" /></p>
</form>
</body>
</html>
分享到：
相关推荐
ASP.NET 图片预览技术是Web开发中一个实用的功能，特别是在用户需要上传图片并即时查看效果的场景下。本文将详细讲解如何在ASP.NET环境中实现图片上传后的即时预览，以及考虑不同浏览器的兼容性问题。 首先，我们...
**JavaScript前端图片预览插件详解** 在网页开发中，图片预览是一个常见的需求，它允许用户在上传或查看图片前进行预览操作。本文将详细介绍一个基于JavaScript实现的前端图片预览插件，该插件利用HTML5的Canvas...
**jQuery图片预览插件详解** 在Web开发中，图片预览功能是用户交互体验的重要组成部分，尤其是在上传图片或展示图片集时。jQuery作为一个轻量级的JavaScript库，提供了丰富的插件来增强这一功能。本篇文章将深入...
在IT行业中，图片预览是一项常见且重要的功能，尤其在网页和应用程序中。它允许用户在不实际下载或打开文件的情况下查看图片内容，提升了用户体验。本文将深入探讨如何实现这一功能，包括前端和后端的技术实现。 ...
vue3 发布之后，开始使用 vue3 + ts 写代码，需要使用图片预览插件，在 npm 找了一圈没有适合的。要么是 v2 的插件，要么是不支持 ts,要么是使用不方便，因此封装一个简单的图片预览插件。 内附使用说明 纯手打，...
本教程将深入讲解如何使用jQuery实现图片预览功能。 首先，我们需要了解基本的HTML结构。在`index.html`文件中，你需要创建一个`<input>`元素用于让用户选择图片，以及一个`<div>`元素作为预览区域： ```html <!...
**标题详解：** "viewer.js图片预览插件" 是一个专门用于图片预览的JavaScript库，它提供了方便的功能，使用户能够在网页上快速、高效地预览图片。这个插件设计灵活，可以在不同的项目中独立使用，无需依赖其他大型...
在这个背景下，"jQuery H5移动端图片预览插件"应运而生，它旨在解决移动端图片预览的问题，为用户提供流畅、高效且自适应的图片浏览体验。 这款插件主要针对手机和平板等移动设备设计，它能够无缝地集成到你的H5...
标题中的“多图片预览-左右切换查看-兼容PC、移动端”指的是一个功能完善的图片预览系统，它能够处理和展示多个图片，并且用户可以通过左右滑动或点击来进行图片之间的切换。这个系统的设计考虑到了跨平台的兼容性，...
在IT行业中，图片预览和放大功能是网页设计和用户体验中的关键部分，特别是在电商网站上，用户需要清晰地查看商品细节。"图片预览新窗口全屏图片展示功能"是这样一种技术，它允许用户点击缩略图后，在一个新的浏览器...
在IT行业中，图片预览是一项常见且重要的功能，特别是在社交应用中，如微信。"仿微信图片预览"是一个项目，旨在实现一个自定义的图片预览机制，它模仿了微信聊天界面中的图片查看方式，提供了平滑的用户体验，防止...
### tinyMCE本地图片预览实现详解 #### 一、简介 tinyMCE是一款非常流行的开源富文本编辑器，广泛应用于各种网站和应用程序中。它提供了丰富的文本编辑功能，包括但不限于格式化文本、插入图像、链接等。在某些...
在网页开发中，图片预览和浏览功能是一个常见的需求，特别是在用户需要查看多张图片时。这个场景下，"jQuery 图片预览浏览功能"是一个关键的实现方式，它利用了JavaScript库jQuery的强大功能，提供了方便快捷的图片...
**viewer.js 图片预览插件** viewer.js 是一个轻量级且易于使用的JavaScript插件，专门用于在网页上实现图片预览功能。这个插件适用于各种设备，包括桌面和移动端，使得用户在点击图片后能够快速查看大图并进行交互...
"android 视频图片预览"这一主题，主要涵盖了以下几个关键知识点： 1. **多媒体文件管理**： 在Android中，管理和访问本地存储的图片和视频文件需要用到`MediaStore`类，它提供了访问设备上所有媒体内容的接口。...
**jQuery实现的图片预览插件(imgPreview)详解** 在Web开发中，用户在上传或浏览图片时，能够实时预览图片是一项非常重要的功能。jQuery的imgPreview插件提供了一个简单且高效的解决方案，使得开发者可以轻松地在...
在IT领域，图片预览是用户体验中不可或缺的一部分，特别是在网页设计和移动应用开发中。"图片预览源代码"提供了一种实现这一功能的方式，它支持图片切换动画，增加了交互性和视觉吸引力。以下是对这个主题的详细解释...
【图片预览插件 viewer】是一种在网页应用中实现图片快速预览功能的工具，它允许用户无需下载或打开原始大图即可查看图片内容。在网页设计和开发中，这样的插件是至关重要的，因为它提供了方便、高效且用户体验良好...
在线图片预览功能是网页应用中的常见需求，它允许用户在不下载图片的情况下查看图片内容。这个功能在很多场景下都很实用，比如社交媒体、电子商务网站、文档分享平台等。实现在线图片预览功能通常涉及前后端的交互，...
在React开发领域，图片预览和查看功能是常见的需求，特别是在构建富交互式的Web应用时。这个名为"react-这是一个用于做图片预览或者图片查看得react插件"的项目，正是为了解决这一问题而设计的。它提供了一种方便、...