使用HMTL5 FileReader 处理上传图片的预览，以下代码已经在IE7，8,9,firefox 21.0,chrome浏览器下测试通过
如想了解更多HTML5
请参看：http://hushc.sinaapp.com//post/27
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script type="text/javascript" src='jquery.js'>
</script>
<script type="text/javascript">
$(function() {
var path,
clip = $("#img"),
FileReader = window.FileReader;
$("#fileP").change(function() {
if (FileReader) {
var reader = new FileReader(),
file = this.files[0];
reader.onload = function(e) {
clip.attr("src", e.target.result);
};
reader.readAsDataURL(file);
}
else {
path = $(this).val();
if (/"\w\W"/.test(path)) {
path = path.slice(1,-1);
}
clip.attr("src",path);
}
});
});
</script>
</head>
<body>
<input type="file" id="fileP">
<img id="img" src="">
</body>
</html>
相关推荐
在网页开发中，上传图片预览功能是一项常用且重要的功能，它允许用户在实际上传之前查看图片的效果，提升用户体验。本篇文章将详细讲解如何利用JavaScript实现这一功能，以标题“上传图片预览功能”和描述“在页面...
上传图片"> ``` 这里的`enctype="multipart/form-data"`属性是必须的，因为它允许我们发送二进制数据（如图片）到服务器。 接下来，我们需要在`upload.php`文件中处理上传请求。PHP的`$_FILES`全局数组包含了...
"兼容ff的上传图片预览功能示例"这个标题表明了这个代码实例或教程主要目标是确保在Firefox浏览器中能够正常运行的图片预览功能。 通常，图片预览功能依赖于HTML5的File API，包括`<input type="file">`元素和`...
在网页开发中，JS上传图片预览功能是一个常见的需求，特别是在用户需要在提交前查看上传图片效果的情况下。这个小DEMO提供了一种解决方案，适用于多种浏览器环境，包括IE6到9、Firefox、Chrome17+、Opera11+以及...
为了提供更好的用户体验，"上传图片带预览功能"是一项至关重要的特性。它允许用户在实际提交文件之前查看所选图片的效果，确保图片符合预期，减少误操作。这项功能不仅适用于PC端，同时也必须支持手机端，特别是微信...
在本文中，我们将深入探讨如何利用jQuery实现一个图片上传预览功能，这是一个用户友好的特性，尤其在处理图像上传时，能够提供即时的反馈，提升用户体验。 首先，我们需要理解jQuery的核心概念。jQuery通过一种简洁...
在Web开发中，上传图片预览功能是非常常见的需求。通过HTML、CSS和JavaScript可以实现图片上传预览的功能。本文将对JS上传图片预览技术进行详细的介绍 и分析。 1. 文件上传输入限制 首先，在HTML文件中，我们需要...
总的来说，".net批量上传图片带预览功能"这个项目涵盖了.NET Web开发中的文件上传、前端交互和用户体验优化等多个知识点，对于学习和实践.NET Web开发具有很高的参考价值。通过理解并实践这些代码，开发者可以提升...
在开发Web应用时，用户可能需要上传图片，为了提供更好的用户体验，实现上传图片之前的预览功能至关重要。这个功能允许用户在正式提交之前查看所选图片的效果，确认无误后再进行上传，大大降低了出错的可能性。本...
写在前面：计划实现图片上传预览功能，但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式，得不到文件真实路径，所以无法直接预览，于是采用将图片上传至服务器，传回服务器路径，实现预览。前端采用通过...
在前端开发中，图片上传即时预览功能是一个常见的需求，特别是在网页表单、社交媒体平台或者内容编辑器等场景。这个功能允许用户在选择图片后，能够在页面上立即看到即将上传的图片，提供一种直观的反馈，提升用户...
在Java开发中，图片上传预览功能是一项常见的需求，它允许用户在正式上传图片之前查看其效果，确保图片质量和格式符合应用的要求。本教程将详细讲解如何在Java环境中实现这一功能，包括必要的技术和步骤。 首先，...
资源名：asp实现多图片上传并预览功能程序源码.zip 资源类型：程序源代码 源码说明： 基于asp的多图片上传功能 并实现预览功能的程序源码 包含完整代码和注释很适合学习借鉴 适合人群：新手及有一定经验的开发人员
综合上述，JS与ASP.NET的结合使用使得图片上传和预览功能变得更加高效和直观。开发过程中，还需要注意安全性问题，比如防止文件类型攻击、大小限制等。同时，为了兼容不支持HTML5特性的旧版浏览器，可能需要提供降级...
在这个场景下，我们讨论的是如何在Bootstrap环境中实现图片的上传和预览功能。 首先，我们要了解`bootstrap-fileinput`，这是一个基于Bootstrap的高级文件输入插件，由Krajee提供。这个插件极大地扩展了...
在前端开发中，"input file上传图片预览"是一个常见的需求，它允许用户选择本地的图像文件，并在上传前提供预览。...通过这些技术，我们可以创建一个交互式的、安全的图片预览功能，同时考虑用户体验和安全性。
js实现图片上传预览功能，自己稍微加工了一下，这个在IE9上面挺有意思的，alert(img.offsetWidth+"---"+img.offsetHeight);第一次输出每次都是28---30，第二次之后就会显示图片的实际大小，具体原理不懂，有明白的...
在.NET开发环境中，图片上传预览功能是常见的需求，它允许用户在上传图片到服务器之前进行查看和确认，提升用户体验。下面将详细讲解如何实现这一功能。 首先，我们需要理解图片预览的基本原理。图片预览通常涉及到...