使用FileReader实现打开本地图片并预览。
挺方便的，可惜不是所有浏览器都支持，坑爹的IE。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function preImg(sourceId, targetId) {
if (typeof FileReader === 'undefined') {
alert('Your browser does not support FileReader...');
return;
}
var reader = new FileReader();
reader.onload = function(e) {
var img = document.getElementById(targetId);
img.src = this.result;
}
reader.readAsDataURL(document.getElementById(sourceId).files[0]);
}
</script>
</head>
<body>
<form action="">
<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
<img id="imgPre" src="" style="display: block;" />
</form>
</body>
</html>
分享到：
相关推荐
在本文中，我们将深入探讨如何使用纯JavaScript...通过这个示例，你可以学习到如何利用JavaScript进行图片预览和大小检查，提升你的网页应用用户体验。记住，始终关注浏览器兼容性和用户体验，这在Web开发中至关重要。
以下是一个具体的代码示例，展示了如何使用jQuery和AJAX实现本地图片预览： ```javascript // 引入jQuery库 <script src="path/to/jquery.min.js"></script> // 定义上传图片的函数 <script type="text/javascript...
JavaScript实现本地图片预览是一项在网页中常见的功能，它允许用户在不上传图片到服务器的情况下，直接在客户端浏览器中查看选定的本地图片。这个功能在文件上传组件中非常实用，可以提高用户体验，避免了用户上传后...
在“html5实现页面的显示本地图片”这个主题中，我们主要关注的是HTML5的`<input type="file">`标签以及File API，它们允许用户选择本地图片并在网页上预览或处理。 **1. `<input type="file">`标签** `...
在这个“html5+js本地图片预览”的主题中，我们将深入探讨如何利用HTML5的File API和JavaScript来实现在用户选择图片后即时预览，以及鼠标悬停时展示大图的效果。 1. **File API**：HTML5的File API允许开发者在...
总结一下，使用JavaScript实现本地文件选择器功能主要涉及HTML5的`<input type="file">`，`FileList`，`FileReader`，以及可能的`fetch`或`XMLHttpRequest`。理解并掌握这些API，就能灵活地处理用户选择的本地文件，...
在这个“html5实现多图片上传预览（源码，已测试）”的项目中，我们主要关注的是HTML5的新特性——File API和拖放API，它们允许我们在不借助服务器端处理的情况下实现本地文件的读取和预览。 首先，File API是HTML5...
总结来说，这个例子展示了如何使用JavaScript（特别是jQuery库）结合HTML和CSS实现图片预览功能，包括滚动时自动放大缩小图片以及拖动查看图片的不同部分。开发者完全自定义了这些行为，提供了良好的用户体验。通过...
在本文档中，我们将深入探讨如何使用HTML5和jQuery实现在本地图片上传前的预览功能。这是一个常见的前端开发需求，允许用户在提交文件到服务器之前先查看选定的图片，提高用户体验。 首先，HTML5引入了新的文件API...
这个资源"2014-5-6更新 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案，用于实现一个功能强大的本地图片预览功能，它能在多种主流浏览器中正常工作，包括...
首先，本地图片预览功能的核心在于读取用户选择的文件，并在不实际上传的情况下在浏览器中显示。在HTML5中，File API提供了一个这样的机制，允许我们访问和操作用户选取的文件。在jQuery插件中，我们可以利用这些API...
JavaScript作为浏览器端的主要脚本语言，与HTML5结合，可以实现许多创新功能，如图片预览和获取图片属性。在本文中，我们将深入探讨如何使用HTML5和JavaScript来实现这些功能，并参考给出的`test.html`文件进行解析...
本文将详细介绍如何利用HTML5的File API和Canvas技术来实现移动端的图片本地预览和缩略图生成。 一、HTML5的File API File API是HTML5引入的一套接口，允许JavaScript直接操作用户选择的文件。它包括FileReader、...
对于本地图片预览，JavaScript主要负责处理文件输入、DOM操作以及图像显示。 1. **文件输入**：在HTML5中，`<input type="file">`元素提供了一个选择本地文件的接口。通过添加`accept`属性，我们可以限制用户只能...
图片预览"> ``` Excel、PPT、DOC文件的预览相对复杂，因为这些文件格式不是浏览器原生支持的。通常，我们会依赖于服务器端转换服务或第三方库，如Google Docs Viewer，它可以提供对这些文件类型的在线预览。通过将...
在移动端，考虑到性能和兼容性，插件可能还会使用CSS3的viewport单位（如vw和vh）来实现自适应布局，确保图片预览窗口在不同尺寸的屏幕上都能正确显示。 此外，为了实现更好的用户体验，插件可能会包含以下特性： 1...
总的来说，实现JavaScript上传图片预览效果需要结合HTML、CSS和JavaScript，利用File API读取文件，并通过`<img>`标签显示预览。在旧版浏览器中，可能需要依赖额外的库或技术来达到兼容性。这些文件名表明了实现这一...
在本文中，我们将探讨如何通过JavaScript实现在不将图片上传至服务器的情况下进行本地预览，同时兼顾非IE浏览器（使用HTML5特性）和IE浏览器（使用滤镜功能）的兼容性。 首先，对于非IE浏览器，HTML5提供了...
"html+javascript头像上传预览"是利用HTML和JavaScript技术实现的一种交互方式，它允许用户在提交头像之前预览选定的图片，提供更好的用户体验。在此过程中，CSS可能用于美化和定制预览效果，例如将头像显示为圆形。...