这是一个简单的实现上传图片的预览功能,兼容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>
相关推荐
在本项目中,我们将探讨如何使用JavaScript(JS)与Koa2框架来构建一个支持文件上传、下载和预览功能的简易应用。这个项目特别适合初学者,因为它的实现过程清晰明了,易于理解。 首先,Koa2是Node.js平台上的一个...
这个名为“由html5实现的文件上传预览功能--zyUpload”的压缩包可能包含一个完整的实现上述功能的代码示例。解压后,你可以查看源代码,学习如何在实际项目中应用这些技术。同时,也可以参考这个示例,进行自定义...
在前端开发中,用户界面的交互性至关重要,而头像图片上传预览功能是许多网站和应用中的常见需求。这个功能允许用户在正式提交之前查看所选图片的效果,增加了用户体验。下面我们将详细讨论如何使用原生JavaScript...
在本文中,我们将深入探讨如何使用原生JavaScript实现简单的图片上传预览功能,以及与jQuery的结合使用。这个功能在Web开发中非常常见,尤其是在创建图片相册或图像处理应用时。通过预览图片,用户可以在正式上传...
在Java开发中,处理PDF文件是一项常见的任务,包括上传、下载、在线预览、删除以及修改等操作。这里我们将深入探讨这些功能的实现,并结合标签`java xpdf java实现pdf`来讨论XPDF库在Java中的应用。 1. **PDF上传**...
"基于js的上传预览实现"是一个重要的功能,它允许用户在实际提交文件到服务器之前,在前端页面上预览即将上传的内容。这个功能提高了用户体验,因为用户可以即时看到文件的效果,而无需等待服务器的反馈。下面我们将...
在本文中,我们将深入探讨如何使用AngularJS框架来实现图片上传和预览功能。AngularJS,作为一款强大的前端JavaScript框架,提供了丰富的功能和模块化设计,使得开发动态Web应用变得更加简单。图片上传和预览是现代...
在JavaScript的世界里,实现文件上传功能是一个常见的需求,尤其是在现代Web应用中。传统的文件上传通常依赖于Flash技术,但随着HTML5的普及,JavaScript已经能够提供原生的、无插件的文件上传解决方案。本教程将...
综上所述,实现图片预览功能需要前端和后端的协同工作。前端利用File API读取并显示图片,后端则负责接收、处理图片并提供预览的URL。这个过程涉及到文件上传、图片处理、安全控制等多个环节,每个环节都需要根据...
在本篇讨论中,我们将深入探讨如何利用OpenOffice实现PDF文件的上传预览功能,同时也会提及到一个可能用到的工具——`PDF预览JAR`。 首先,要实现PDF预览,我们需要了解OpenOffice的Java API(JODConverter)。...
本文所述的内容为如何在前端页面中使用JavaScript实现图片上传和预览功能,虽然内容简单,但涵盖了实现该功能所需的核心知识点。通过上述步骤,可以将用户本地的图片文件上传至网页,并提供给用户预览,增强用户体验...
在压缩包文件名为"imagePreview"的情况下,很可能包含了一个JavaScript文件或一个简单的HTML示例,演示了如何实现这个预览功能。使用这个文件,开发者可以快速地在自己的项目中集成预览图片的功能,而不必从头开始...
在这个场景下,我们讨论的是如何在Bootstrap环境中实现图片的上传和预览功能。 首先,我们要了解`bootstrap-fileinput`,这是一个基于Bootstrap的高级文件输入插件,由Krajee提供。这个插件极大地扩展了...
现在,我们已经有了图片预览功能,接下来就是实现上传。zyFile.js是一个专门用于文件上传的jQuery插件,它简化了与服务器端的通信过程。在HTML中,我们需要一个隐藏的表单和一个按钮来触发实际的上传操作: ```html...
在开发Web应用时,用户可能需要上传图片,为了提供更好的用户体验,实现上传图片之前的预览功能至关重要。这个功能允许用户在正式提交之前查看所选图片的效果,确认无误后再进行上传,大大降低了出错的可能性。本...
本话题聚焦于一个特定的JS组件,它旨在解决浏览器兼容性问题,特别是针对Firefox(FF)浏览器的图片上传预览功能,并结合了Ajax技术进行无刷新的数据传输。 首先,让我们深入理解“图片上传预览”这一概念。在网页...
本文将深入探讨如何使用jQuery实现一个简单的图片上传预览功能,这是一个常见的需求,尤其在网页表单中,用户需要在提交之前查看所选图片的效果。 首先,我们需要明白图片预览的基本原理。在用户选择图片文件后,...
它可能包含HTML结构、CSS样式和JavaScript代码,用于展示图片上传预览功能。`uploads.js`则是插件的主要实现,包含了处理图片预览逻辑的JavaScript代码。通常,这个文件会包含事件监听器(如`change`事件,当用户...
总的来说,JavaScript实现图片上传并预览功能涉及到HTML、CSS和JavaScript的紧密结合,通过文件API读取用户选择的图片,然后动态更新页面元素来实现预览效果。这一过程不仅提高了用户体验,也为开发者提供了更多创新...