`
西北小强
  • 浏览: 344640 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js实现简单的不上传预览功能

 
阅读更多

这是一个简单的实现上传图片的预览功能,兼容chrome和IE,前几天做项目的时候有用到,在这里做个记录。

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
	<p> 
	   <label>请选择一个图像文件:</label> 
	   <input type="file" id="image_file" value="ddd" /> 
	</p>  
	<div id="result"></div> 
<script>
	var result = document.getElementById("result"); 
	var input = document.getElementById("image_file"); 
	 
	if(typeof FileReader==='undefined'){ 
		input.attachEvent("onchange",loadImgForIE);
	}else{ 
		input.addEventListener('change',readFile,false); 
	} 

	function readFile(){ 
		var file = this.files[0]; 
		if(!/image\/\w+/.test(file.type)){ 
			alert("文件必须为图片!"); 
			return false; 
		} 
		var reader = new FileReader(); 
		reader.readAsDataURL(file); 
		reader.onload = function(e){ 
			result.innerHTML = '<img src="'+this.result+'" alt=""/>' 
		} 
	} 

	function loadImgForIE(){
		var imagePath=input.value;
		result.innerHTML = '<img src="'+imagePath+'" alt=""/>' 
	}
</script>
</BODY>
</HTML>

 

 

分享到:
评论

相关推荐

    js+koa2 实现上传下载预览功能

    在本项目中,我们将探讨如何使用JavaScript(JS)与Koa2框架来构建一个支持文件上传、下载和预览功能的简易应用。这个项目特别适合初学者,因为它的实现过程清晰明了,易于理解。 首先,Koa2是Node.js平台上的一个...

    由html5实现的文件上传预览功能

    这个名为“由html5实现的文件上传预览功能--zyUpload”的压缩包可能包含一个完整的实现上述功能的代码示例。解压后,你可以查看源代码,学习如何在实际项目中应用这些技术。同时,也可以参考这个示例,进行自定义...

    原生js简单的头像图片上传预览效果

    在前端开发中,用户界面的交互性至关重要,而头像图片上传预览功能是许多网站和应用中的常见需求。这个功能允许用户在正式提交之前查看所选图片的效果,增加了用户体验。下面我们将详细讨论如何使用原生JavaScript...

    原生JS简单图片上传预览代码.zip

    在本文中,我们将深入探讨如何使用原生JavaScript实现简单的图片上传预览功能,以及与jQuery的结合使用。这个功能在Web开发中非常常见,尤其是在创建图片相册或图像处理应用时。通过预览图片,用户可以在正式上传...

    java实现pdf上传,下载,在线预览,删除,修改等功能

    在Java开发中,处理PDF文件是一项常见的任务,包括上传、下载、在线预览、删除以及修改等操作。这里我们将深入探讨这些功能的实现,并结合标签`java xpdf java实现pdf`来讨论XPDF库在Java中的应用。 1. **PDF上传**...

    基于js的上传预览实现

    "基于js的上传预览实现"是一个重要的功能,它允许用户在实际提交文件到服务器之前,在前端页面上预览即将上传的内容。这个功能提高了用户体验,因为用户可以即时看到文件的效果,而无需等待服务器的反馈。下面我们将...

    angularjs实现上传图片并且预览

    在本文中,我们将深入探讨如何使用AngularJS框架来实现图片上传和预览功能。AngularJS,作为一款强大的前端JavaScript框架,提供了丰富的功能和模块化设计,使得开发动态Web应用变得更加简单。图片上传和预览是现代...

    JS 实现文件上传功能

    在JavaScript的世界里,实现文件上传功能是一个常见的需求,尤其是在现代Web应用中。传统的文件上传通常依赖于Flash技术,但随着HTML5的普及,JavaScript已经能够提供原生的、无插件的文件上传解决方案。本教程将...

    实现图片预览功能

    综上所述,实现图片预览功能需要前端和后端的协同工作。前端利用File API读取并显示图片,后端则负责接收、处理图片并提供预览的URL。这个过程涉及到文件上传、图片处理、安全控制等多个环节,每个环节都需要根据...

    openoffice实现pdf上传文件预览功能

    在本篇讨论中,我们将深入探讨如何利用OpenOffice实现PDF文件的上传预览功能,同时也会提及到一个可能用到的工具——`PDF预览JAR`。 首先,要实现PDF预览,我们需要了解OpenOffice的Java API(JODConverter)。...

    简单实现JS上传图片预览功能

    本文所述的内容为如何在前端页面中使用JavaScript实现图片上传和预览功能,虽然内容简单,但涵盖了实现该功能所需的核心知识点。通过上述步骤,可以将用户本地的图片文件上传至网页,并提供给用户预览,增强用户体验...

    js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器不兼容

    在压缩包文件名为"imagePreview"的情况下,很可能包含了一个JavaScript文件或一个简单的HTML示例,演示了如何实现这个预览功能。使用这个文件,开发者可以快速地在自己的项目中集成预览图片的功能,而不必从头开始...

    bootstrap图片上传和预览

    在这个场景下,我们讨论的是如何在Bootstrap环境中实现图片的上传和预览功能。 首先,我们要了解`bootstrap-fileinput`,这是一个基于Bootstrap的高级文件输入插件,由Krajee提供。这个插件极大地扩展了...

    HTML5实现多文件图片预览上传功能

    现在,我们已经有了图片预览功能,接下来就是实现上传。zyFile.js是一个专门用于文件上传的jQuery插件,它简化了与服务器端的通信过程。在HTML中,我们需要一个隐藏的表单和一个按钮来触发实际的上传操作: ```html...

    实现上传图片之前的预览功能.rar

    在开发Web应用时,用户可能需要上传图片,为了提供更好的用户体验,实现上传图片之前的预览功能至关重要。这个功能允许用户在正式提交之前查看所选图片的效果,确认无误后再进行上传,大大降低了出错的可能性。本...

    js上传预览支持FF图片上传预览的ajax上传组件

    本话题聚焦于一个特定的JS组件,它旨在解决浏览器兼容性问题,特别是针对Firefox(FF)浏览器的图片上传预览功能,并结合了Ajax技术进行无刷新的数据传输。 首先,让我们深入理解“图片上传预览”这一概念。在网页...

    jquery上传图片预览简单实现

    本文将深入探讨如何使用jQuery实现一个简单的图片上传预览功能,这是一个常见的需求,尤其在网页表单中,用户需要在提交之前查看所选图片的效果。 首先,我们需要明白图片预览的基本原理。在用户选择图片文件后,...

    图片上传预览效果,很小的一个插件

    它可能包含HTML结构、CSS样式和JavaScript代码,用于展示图片上传预览功能。`uploads.js`则是插件的主要实现,包含了处理图片预览逻辑的JavaScript代码。通常,这个文件会包含事件监听器(如`change`事件,当用户...

    js实现图片上传并预览功能

    总的来说,JavaScript实现图片上传并预览功能涉及到HTML、CSS和JavaScript的紧密结合,通过文件API读取用户选择的图片,然后动态更新页面元素来实现预览效果。这一过程不仅提高了用户体验,也为开发者提供了更多创新...

Global site tag (gtag.js) - Google Analytics