`
Andy_Dou
  • 浏览: 233087 次
  • 性别: Icon_minigender_1
  • 来自: 沈阳
社区版块
存档分类
最新评论

图片上传前预览

 
阅读更多

<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 苹果浏览器不兼容

    这个标题提到的"js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器",表明这是一个旨在解决浏览器兼容性问题的解决方案,涵盖了老版本的Internet Explorer(IE6到IE9)以及Firefox、Chrome、Opera...

    jquery图片上传前预览 无需上传至服务器

    在IT行业中,尤其是在Web开发领域,用户经常需要上传图片,而提供一个图片上传前的预览功能能够极大地提升用户体验。这个“jquery图片上传前预览 无需上传至服务器”的技术方案,就是解决这一问题的一种方法。它允许...

    图片上传前预览效果,静态页面显示

    图片上传预览 *"&gt; 图片预览"&gt; document.getElementById('imageInput').addEventListener('change', function(e) { var file = e.target.files[0]; if (!file.type.startsWith('image/')) { alert('请...

    图片上传前预览和操作图片

    "图片上传前预览和操作图片"这个主题涉及的技术点主要包括图片预览、图片操作以及上传流程。下面我们将详细探讨这些知识点。 1. 图片预览: 图片预览功能允许用户在实际上传之前查看选定的图片,确保图片质量、方向...

    【ASP.NET编程知识】ASP.NET MVC图片上传前预览简单实现.docx

    ASP.NET MVC图片上传前预览简单实现 ASP.NET MVC是一种基于模型视图控制器(MVC)模式的Web应用程序框架,用于构建可维护、可扩展、灵活的Web应用程序。在ASP.NET MVC中,图片上传是常见的功能之一,本文将介绍如何...

    asp.net vs2012 fileupload 图片上传前预览

    在本篇中,我们将深入探讨如何在VS2012中实现ASP.NET FileUpload控件的图片上传前预览功能。 首先,我们需要在Web页面上添加一个FileUpload控件和一个Image控件。FileUpload控件用于让用户选择文件,Image控件则...

    ext图片上传前预览小demo

    在EXT中,处理图片上传并实现预览功能是一项常见的需求,尤其在用户交互丰富的应用中,允许用户在正式上传前预览图片,可以提供更好的用户体验。 在EXT中,图片预览通常涉及到以下几个关键知识点: 1. **File ...

    jQuery+HTML5实现图片上传前预览效果

    jQuery+HTML5实现图片上传前预览效果,代码简洁,方便使用。

    asp.net IE6、7、8 图片上传前预览

    在ASP.NET环境中,针对Internet Explorer 6、7和8这三个早期版本实现图片上传前的预览...综上所述,要实现在ASP.NET中IE6、7、8浏览器上的图片上传预览,需要利用JavaScript和特定的IE滤镜技术,并确保兼容性和安全性。

    JS+asp.net+图片上传+预览+支持多上传+上传前预览

    在本文中,我们将深入探讨如何使用JavaScript(JS)与ASP.NET技术实现图片上传、预览以及支持多文件上传和上传前预览的功能。这个技术组合是现代Web应用中常见的需求,尤其是在用户交互丰富的网站和应用中。 首先,...

    js-图片上传前预览

    不论您使用的是 IE6 还是 IE7,还是火狐、均可以看到以下预览。 虽然可以在ie6,ie7,火狐预览、但在谷歌浏览器还是不行、哪位高人要是有更好的办法浏览、能否交流交流 收藏下,qq:253930407

    兼容IE chrome FF 图片上传前预览

    这段代码是用于在图片上传前实现预览功能的,它兼容了...总的来说,这段代码实现了一个跨浏览器的图片上传预览功能,利用了现代浏览器的FileReader API和旧版IE的滤镜技术,确保在各种环境下都能正确显示预览图像。

    原生JS实现图片上传前的预览

    "原生JS实现图片上传前的预览"是一个基础但至关重要的技术点,尤其对于初学者而言,掌握这一技能能够提升项目的交互体验。在这个场景下,我们通常会用到HTML5中的File API,它提供了对用户选择的文件进行读取、操作...

    bootstrap图片上传和预览

    Bootstrap图片上传和预览是网页开发中的一个常见功能,它结合了美观的界面设计与实用的文件处理技术。Bootstrap是一个流行的前端开发框架,提供了一系列组件和工具,使得开发者能够快速构建响应式、移动设备优先的...

    图片上传前客户端预览

    ### 图片上传前客户端预览 #### 知识点概览 本文将详细介绍如何使用JavaScript在客户端实现图片上传前的预览功能。该方法适用于多种浏览器环境,包括IE7及更高版本。通过以下知识点的学习,您将能够掌握利用HTML、...

    .Net图片上传预览

    在.NET开发环境中,图片上传预览功能是常见的需求,它允许用户在上传图片到服务器之前进行查看和确认,提升用户体验。下面将详细讲解如何实现这一功能。 首先,我们需要理解图片预览的基本原理。图片预览通常涉及到...

    fileupload上传图片前预览

    在ASP.NET开发中,FileUpload控件是用于处理用户上传文件的核心组件,特别是处理图片上传时,为了提供更好的用户体验,通常需要在用户正式提交前实现图片预览功能。这一功能可以减少用户因错误选择或不符合规格的...

Global site tag (gtag.js) - Google Analytics