<input type="file" />上传前预览图片，不支持IE框架页（frameset，iframe）
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#previewContainer{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var jImgFile = $("#imgFile");
var pw = "200px";
var ph = "200px";
jImgFile.change(function() {
var fileReader = window.FileReader;
if (fileReader) {
var reader = new FileReader();
var file = this.files[0];
reader.onload = function(e) {
$('#previewContainer').empty();
$("#previewContainer").append("<img id='imgPreview' src='"+ e.target.result +"' width='"+ pw +"' height='"+ ph +"' />");
};
reader.readAsDataURL(file);
} else {
//window.navigator.userAgent.indexOf("MSIE") >= 1)
alert(window.navigator.userAgent);
$('#previewContainer').empty();
var pContainer = $("#previewContainer")[0];
jImgFile[0].select();
jImgFile[0].blur();
pContainer.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;
pContainer.style.width = pw;
pContainer.style.height = ph;
}
});
});
</script>
</head>
<body>
<input type="file" name="file" id="imgFile" />
<div id="previewContainer"></div>
<img width="" height=""/>
</body>
</html>
相关推荐
这个标题提到的"js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器"，表明这是一个旨在解决浏览器兼容性问题的解决方案，涵盖了老版本的Internet Explorer（IE6到IE9）以及Firefox、Chrome、Opera...
在IT行业中，尤其是在Web开发领域，用户经常需要上传图片，而提供一个图片上传前的预览功能能够极大地提升用户体验。这个“jquery图片上传前预览 无需上传至服务器”的技术方案，就是解决这一问题的一种方法。它允许...
图片上传预览 *"> 图片预览"> document.getElementById('imageInput').addEventListener('change', function(e) { var file = e.target.files[0]; if (!file.type.startsWith('image/')) { alert('请...
"图片上传前预览和操作图片"这个主题涉及的技术点主要包括图片预览、图片操作以及上传流程。下面我们将详细探讨这些知识点。 1. 图片预览： 图片预览功能允许用户在实际上传之前查看选定的图片，确保图片质量、方向...
ASP.NET MVC图片上传前预览简单实现 ASP.NET MVC是一种基于模型视图控制器（MVC）模式的Web应用程序框架，用于构建可维护、可扩展、灵活的Web应用程序。在ASP.NET MVC中，图片上传是常见的功能之一，本文将介绍如何...
在本篇中，我们将深入探讨如何在VS2012中实现ASP.NET FileUpload控件的图片上传前预览功能。 首先，我们需要在Web页面上添加一个FileUpload控件和一个Image控件。FileUpload控件用于让用户选择文件，Image控件则...
在EXT中，处理图片上传并实现预览功能是一项常见的需求，尤其在用户交互丰富的应用中，允许用户在正式上传前预览图片，可以提供更好的用户体验。 在EXT中，图片预览通常涉及到以下几个关键知识点： 1. **File ...
jQuery+HTML5实现图片上传前预览效果，代码简洁，方便使用。
在ASP.NET环境中，针对Internet Explorer 6、7和8这三个早期版本实现图片上传前的预览...综上所述，要实现在ASP.NET中IE6、7、8浏览器上的图片上传预览，需要利用JavaScript和特定的IE滤镜技术，并确保兼容性和安全性。
在本文中，我们将深入探讨如何使用JavaScript（JS）与ASP.NET技术实现图片上传、预览以及支持多文件上传和上传前预览的功能。这个技术组合是现代Web应用中常见的需求，尤其是在用户交互丰富的网站和应用中。 首先，...
不论您使用的是 IE6 还是 IE7,还是火狐、均可以看到以下预览。 虽然可以在ie6,ie7,火狐预览、但在谷歌浏览器还是不行、哪位高人要是有更好的办法浏览、能否交流交流 收藏下，qq：253930407
这段代码是用于在图片上传前实现预览功能的，它兼容了...总的来说，这段代码实现了一个跨浏览器的图片上传预览功能，利用了现代浏览器的FileReader API和旧版IE的滤镜技术，确保在各种环境下都能正确显示预览图像。
"原生JS实现图片上传前的预览"是一个基础但至关重要的技术点，尤其对于初学者而言，掌握这一技能能够提升项目的交互体验。在这个场景下，我们通常会用到HTML5中的File API，它提供了对用户选择的文件进行读取、操作...
### 图片上传前客户端预览 #### 知识点概览 本文将详细介绍如何使用JavaScript在客户端实现图片上传前的预览功能。该方法适用于多种浏览器环境，包括IE7及更高版本。通过以下知识点的学习，您将能够掌握利用HTML、...
Bootstrap图片上传和预览是网页开发中的一个常见功能，它结合了美观的界面设计与实用的文件处理技术。Bootstrap是一个流行的前端开发框架，提供了一系列组件和工具，使得开发者能够快速构建响应式、移动设备优先的...
在C#中实现图片上传预览，主要涉及到以下几个关键知识点： 1. 图片读取：首先，需要使用C#的System.Drawing命名空间中的类，如Bitmap或Image，来读取本地的图片文件。例如，可以使用`Image.FromFile()`方法加载图片...
在.NET开发环境中，图片上传预览功能是常见的需求，它允许用户在上传图片到服务器之前进行查看和确认，提升用户体验。下面将详细讲解如何实现这一功能。 首先，我们需要理解图片预览的基本原理。图片预览通常涉及到...