<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,它提供了对用户选择的文件进行读取、操作...
Bootstrap图片上传和预览是网页开发中的一个常见功能,它结合了美观的界面设计与实用的文件处理技术。Bootstrap是一个流行的前端开发框架,提供了一系列组件和工具,使得开发者能够快速构建响应式、移动设备优先的...
### 图片上传前客户端预览 #### 知识点概览 本文将详细介绍如何使用JavaScript在客户端实现图片上传前的预览功能。该方法适用于多种浏览器环境,包括IE7及更高版本。通过以下知识点的学习,您将能够掌握利用HTML、...
在.NET开发环境中,图片上传预览功能是常见的需求,它允许用户在上传图片到服务器之前进行查看和确认,提升用户体验。下面将详细讲解如何实现这一功能。 首先,我们需要理解图片预览的基本原理。图片预览通常涉及到...
在ASP.NET开发中,FileUpload控件是用于处理用户上传文件的核心组件,特别是处理图片上传时,为了提供更好的用户体验,通常需要在用户正式提交前实现图片预览功能。这一功能可以减少用户因错误选择或不符合规格的...