两种方式实现
- URL
- FileReader
代码如下
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>html5 图片上传预览</title>
<style>
#preview {
width: 300px;
height: 300px;
overflow: hidden;
}
#preview img {
width: 100%;
height: 100%;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
function preview1(file) {
var img = new Image(), url = img.src = URL.createObjectURL(file)
var $img = $(img)
img.onload = function() {
URL.revokeObjectURL(url)
$('#preview').empty().append($img)
}
}
function preview2(file) {
var reader = new FileReader()
reader.onload = function(e) {
var $img = $('<img>').attr("src", e.target.result)
$('#preview').empty().append($img)
}
reader.readAsDataURL(file)
}
$(function() {
$('[type=file]').change(function(e) {
var file = e.target.files[0]
preview1(file)
})
})
</script>
</head>
<body>
<form enctype="multipart/form-data" action="" method="post">
<input type="file" name="imageUpload"/>
<div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>
</form>
</body>
</html>
URL.revokeObjectURL方法Opera不支持，FileReader除IE9及以下不支持，其它浏览器都支持。
相关：
https://developer.mozilla.org/en-US/docs/DOM/window.URL.createObjectURL
https://developer.mozilla.org/en-US/docs/DOM/window.URL.revokeObjectURL
相关推荐
在本资源"HTML5图片预览工具代码.zip"中，我们得到了一个利用HTML5特性实现的图片预览工具，该工具支持用户对图片进行多种操作，如自由拖动、旋转等。 首先，让我们深入了解HTML5中的关键特性是如何在这个工具中...
()'>多图预览</button> function photoPreview(items) { var items = [{ src: "1.jpg", w: 1920, h: 1080, title: "第一张图片的提示" },{ src: "2.jpg", w: 1024, h: 768, title:...
html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果 html5 div图片放大插件手机端图片放大预览效果
例如，以下是一个简单的HTML5图片预览代码示例： ```html 图片预览"> ``` ```javascript document.getElementById('imgInput').addEventListener('change', function(e) { var file = e.target.files[0]; if (!...
HTML5图片预览需要用到两种方法 1.URL 2.FileReader直接上代码 复制代码代码如下:<!DOCTYPE HTML><html> <head> <meta charset=”utf-8″> <title>html5 图片上传预览</title> ...
在移动互联网时代，H5（HTML5）技术已经成为构建网页应用的重要工具，特别是在移动端，它提供了丰富的交互体验和媒体处理能力。jQuery作为一款广泛使用的JavaScript库，为开发者提供了更便捷的DOM操作、事件处理和...
在本场景中，我们关注的是如何利用HTML5和一个名为Swiper的第三方库来实现图片预览功能。Swiper是一款流行的触摸滑动库，特别适合在移动设备上创建滑动效果，如幻灯片、轮播图以及我们这里的图片预览。 Swiper库...
在实际应用中，这样的HTML5图片预览工具可以广泛应用于在线图像编辑器、照片分享网站或者任何需要实时预览和编辑图片的场景。通过学习和理解这段代码，开发者不仅可以掌握HTML5 Canvas的基本操作，还能了解到如何...
"lightGallery"就是这样一个流行的图片预览插件，它能够支持各种浏览器，包括Chrome、Firefox、Safari、Edge等主流平台，确保了广泛的兼容性。 lightGallery的特点与功能包括： 1. **全屏模式**：点击图片后，...
总结，HTML图片预览利用了HTML5的File API和FileReader接口，通过读取和显示用户选择的图片文件，提供了良好的交互体验。在实现过程中需要注意兼容性、尺寸控制、跨域问题以及安全性与性能优化。通过这些技术，可以...
在HTML5中，实现多文件图片预览和上传的功能是通过结合File API、FormData对象以及Ajax技术来完成的。这个实例代码正是展示了如何利用这些特性创建一个用户友好的图片上传体验。 首先，我们需要理解HTML5中的File ...
综上所述，ASP.NET图片预览功能的实现涉及客户端与服务器端的交互，需要掌握HTML5的File API、ASP.NET的文件上传机制以及跨浏览器的兼容性处理。通过合理的设计和实现，我们可以为用户提供一个高效且兼容性良好的...
本文将详细介绍一个基于JavaScript实现的前端图片预览插件，该插件利用HTML5的Canvas元素提供了丰富的预览功能，包括放大、缩小、移动、旋转和翻转。 ### 1. Canvas元素 Canvas是HTML5的一个重要特性，它是一个可...
**jQuery图片预览插件详解** 在Web开发中，图片预览功能是用户交互体验的重要组成部分，尤其是在上传图片或展示图片集时。jQuery作为一个轻量级的JavaScript库，提供了丰富的插件来增强这一功能。本篇文章将深入...
前端部分，图片预览通常通过HTML5的File API来实现。首先，用户选择图片后，文件输入（`<input type="file">`）元素会捕获到这些文件。接着，我们可以使用JavaScript来读取选中的图片。`FileReader`对象提供了`...
本教程将深入讲解如何使用jQuery实现图片预览功能。 首先，我们需要了解基本的HTML结构。在`index.html`文件中，你需要创建一个`<input>`元素用于让用户选择图片，以及一个`<div>`元素作为预览区域： ```html <!...
在图片预览中，我们会将图片文件转换为base64字符串，这个字符串可以直接插入到`<img>`标签的`src`属性中，浏览器会自动解析这个字符串并显示图片。 四、图片预览步骤 1. 用户通过input[type="file"]选择图片文件...
在HTML5中，我们可以使用CSS3的新特性，比如盒模型、过渡（transition）和动画（animation），来实现图片预览时的平滑缩放效果。同时，为了适应不同的屏幕尺寸，可能还应用了响应式设计，如媒体查询（media queries...