`

js 实现 本地图片 预览

    博客分类:
  • js
阅读更多
js 实现 本地图片 预览

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
	/**
	 * 从 file 域获取 本地图片 url
	 */
	function getFileUrl(sourceId) {
		var url;
		if (navigator.userAgent.indexOf("MSIE")>=1) { // IE
			url = document.getElementById(sourceId).value;
		} else if(navigator.userAgent.indexOf("Firefox")>0) { // Firefox
			url = document.getElementById(sourceId).files.item(0).getAsDataURL();
		}
		return url;
	}

	/**
	 * 将本地图片 显示到浏览器上
	 */
	function preImg(sourceId, targetId) {
		var url = getFileUrl(sourceId);
		var imgPre = document.getElementById(targetId);
		imgPre.src = url;
	}
</script>
</head>
<body>
	<form action="">
		<input type="file" name="imgOne" id="imgOne" onchange="preImg(this.id,'imgPre');" />
		<img id="imgPre" src="" width="300px" height="300px" style="display: block;" />
	</form>
</body>
</html>
分享到:
评论

相关推荐

    基于JavaScript实现本地图片预览

    JavaScript实现本地图片预览是一项在网页中常见的功能,它允许用户在不上传图片到服务器的情况下,直接在客户端浏览器中查看选定的本地图片。这个功能在文件上传组件中非常实用,可以提高用户体验,避免了用户上传后...

    纯JS实现本地图片预览的方法

    总之,纯JavaScript实现本地图片预览是一个高效、兼容性好的技术方案,它不仅提高了用户的交互体验,还能满足多种复杂的业务需求。随着前端技术的发展和浏览器能力的增强,这种方法将会有更广泛的应用前景。

    tinyMCE本地图片预览

    以下是一个具体的代码示例,展示了如何使用jQuery和AJAX实现本地图片预览: ```javascript // 引入jQuery库 &lt;script src="path/to/jquery.min.js"&gt; // 定义上传图片的函数 &lt;script type="text/javascript"&gt; ...

    js读取本地图片进行预览,上传服务器

    通过以上知识点,结合提供的`UploadImage`项目源码,你可以实现完整的本地图片预览和上传功能。请参考项目文档或博文链接(https://alisdame.iteye.com/blog/2163940)获取更详细的信息和示例代码。

    纯javascript实现上传图片前图片预览,判断图片大小

    在本文中,我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能,并且检查图片的大小,确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用,因为它允许...

    vue组件js图片查看点击预览大图并下载高清大图到本地

    这个名为"vue组件js图片查看点击预览大图并下载高清大图到本地"的项目,是基于Vue 2.5.2版本实现的,它专注于为PC端用户提供图片预览和下载功能,但不支持IE浏览器。下面我们将详细探讨实现这些功能的关键知识点。 ...

    2014-5-6更新 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览

    这个资源"2014-5-6更新 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览"提供了一个JavaScript解决方案,用于实现一个功能强大的本地图片预览功能,它能在多种主流浏览器中正常工作,包括...

    详解nodejs实现本地上传图片并预览功能(express4.0+)

    代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式,得不到文件真实路径,所以无法...

    js实现的网页图片预览

    本篇文章将详细探讨如何使用JavaScript实现本地及客户端图片预览,并提供一个支持图片比例缩放和清空背景的功能,同时兼容IE8浏览器。 首先,我们需要理解JavaScript如何访问和操作HTML中的元素。在HTML中,我们...

    HTML+JS实现浏览器在线预览文件(支持pdf、excel、ppt、doc、jpg、png格式)

    图片预览"&gt; ``` Excel、PPT、DOC文件的预览相对复杂,因为这些文件格式不是浏览器原生支持的。通常,我们会依赖于服务器端转换服务或第三方库,如Google Docs Viewer,它可以提供对这些文件类型的在线预览。通过将...

    js 手机端 图片放大预览

    JavaScript(简称JS)作为网页动态效果的主要驱动力,提供了多种方法来实现手机端图片的放大预览功能。以下是一些核心知识点,帮助你理解和实现这个功能: 1. **事件监听**: - `touchstart`:当用户手指触摸屏幕...

    JS端基于download.js实现图片、视频时直接下载而不是打开预览

    针对这一问题,我们可以利用JavaScript和第三方库download.js来实现无论何种文件格式都能直接下载的功能。下面将详细解释如何通过JS实现这个功能。 首先,download.js是一个轻量级的JavaScript库,它允许你在浏览器...

    javascript图片预览(滚动放大缩小和拖动查看)

    `ext-watchimg.js`是自定义的JavaScript脚本,可能是实现图片预览功能的核心部分。在这个文件中,开发者可能定义了以下函数: 1. `initWatchImg()`: 初始化图片预览功能,可能包括设置初始状态、绑定事件等。 2. `...

    html5+js本地图片预览

    在这个“html5+js本地图片预览”的主题中,我们将深入探讨如何利用HTML5的File API和JavaScript来实现在用户选择图片后即时预览,以及鼠标悬停时展示大图的效果。 1. **File API**:HTML5的File API允许开发者在...

    js本地图片预览实现代码

    关于js本地图片预览实现代码的知识点,我们可以从以下几个方面进行详细讲解: 1. 图片预览功能的重要性 图片预览功能是网页中常见的一项功能,允许用户在上传文件之前预览将要上传的图片,提高用户体验和界面友好性...

    图片上传本地预览插件

    综上所述,图片上传本地预览插件涉及到的技术点广泛,包括前端的图片预览、文件操作、用户交互、安全性,以及后端的文件接收和验证。在开发过程中,需要综合考虑性能、用户体验和安全性,才能构建一个完善的图片上传...

    利用getObjectURL获取图片路径实现本地预览上传图片

    在现代Web开发中,用户...总的来说,通过`URL.createObjectURL()`,我们可以方便地在用户选择图片后实现本地预览,提升上传图片的功能体验。结合其他前端技术,如Ajax异步上传,可以构建出更高效、友好的图片上传系统。

    jquery 本地上传图片预览Demo

    在本文中,我们将深入探讨如何使用jQuery实现本地图片上传预览功能,这是一项常见的Web开发需求,尤其是在构建交互式用户界面时。jQuery是一款强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互...

    本地预览图片

    对于本地图片预览,JavaScript主要负责处理文件输入、DOM操作以及图像显示。 1. **文件输入**:在HTML5中,`&lt;input type="file"&gt;`元素提供了一个选择本地文件的接口。通过添加`accept`属性,我们可以限制用户只能...

Global site tag (gtag.js) - Google Analytics