这是一个简单的实现上传图片的预览功能，兼容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读取用户选择的图片，然后动态更新页面元素来实现预览效果。这一过程不仅提高了用户体验，也为开发者提供了更多创新...