function photoPreView(image) {
var photoPreView = document.getElementById( "photoPreView" ) ;
if( image.value != '' ){
var checkimg = image.value.toLowerCase() ;
if ( !checkimg.match( /(\.jpg|\.JPG)$/ ) )
{
alert( "只能上传jpg格式的图片" ) ;
return false ;
}else{
var path = getPath( image ) ;
photoPreView.style.width = "100px";
photoPreView.style.height = "100px";
photoPreView.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale)";
photoPreView.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = path;
}
}
}
function getPath(obj)
{
if(obj)
{
if ( window.navigator.userAgent.indexOf("MSIE") >= 1 )
{
obj.select() ;
return document.selection.createRange().text ;
} else if( window.navigator.userAgent.indexOf("Firefox") >= 1 ){
if(obj.files)
{
return obj.files.item(0).getAsDataURL() ;
}
return obj.value ;
}
return obj.value ;
}
}
<input type="file" name = "photopath" onChange="photoPreView(this);" />
<div id = "photoPreView" ></div>
分享到:
相关推荐
标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题,这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer(IE6, IE7, IE8)对现代Web标准的支持不足,而...
为了解决IE8中图片上传预览失败的问题,本文将详细介绍一种通过使用`AlphaImageLoader`滤镜来实现图片预览的技术方案,并提供具体的实现代码及注意事项。 #### 解决方案的核心思路 本解决方案的核心在于利用IE特有...
"JS上传图片预览技术" 在Web开发中,上传图片预览功能是非常常见的需求。通过HTML、CSS和JavaScript可以实现图片上传预览的功能。本文将对JS上传图片预览技术进行详细的介绍 и分析。 1. 文件上传输入限制 首先,...
博主在网上找到了剥离出来的百度开发的ueditor中有多图片上传功能的例子(仅针对JSP),加上之前的适应IE8+的预览JS,二者结合,则既可以上传图片,又可以预览图片。 适应IE8+的预览JS: 下载网址为:...
标题中的“上传图片预览-兼容IE6,IE7,IE8,FF”指的是一个Web开发的技术解决方案,目的是实现图片上传前的预览功能,并确保该功能在早期版本的Internet Explorer(IE6、IE7、IE8)以及Firefox浏览器上都能正常工作...
这个项目使用原生JavaScript实现了多张图片的上传和预览功能,且兼容到低版本浏览器如IE8。我们将深入探讨这个功能的实现原理。 首先,我们需要了解HTML部分。在页面中,通常会有一个`<input type="file">`元素用于...
这个“多图片预览js”功能就是利用JavaScript编写的一种技术,它允许用户在上传图片之前先进行预览,提高用户体验并减少错误上传的可能性。下面将详细解释实现这一功能的关键知识点。 首先,我们需要理解JavaScript...
- 当`<input type="file">`元素发生`change`事件时,调用`previewImage`函数进行图片预览。 5. **兼容性处理:** 为了确保代码在不同浏览器中的兼容性,本例提供了两种实现方式: - **对于现代浏览器**:使用...
**JavaScript前端图片预览插件详解** 在网页开发中,图片预览是一个常见的需求,它允许用户在上传或查看图片前进行预览操作。本文将详细介绍一个基于JavaScript实现的前端图片预览插件,该插件利用HTML5的Canvas...
在实践中,这种解决方案可能会包含一个JavaScript函数或者一个小巧的库,用于处理图片预览的逻辑,并确保在各种浏览器中都能正常工作。 在压缩包文件名为"imagePreview"的情况下,很可能包含了一个JavaScript文件或...
在网页开发中,兼容性问题始终是一个挑战,尤其是在处理老版本的Internet Explorer(IE)浏览器时,如IE6、IE7和IE8。这些浏览器在处理某些现代Web技术时存在局限,例如对CSS3、HTML5新特性以及JavaScript的一些高级...
本篇文章将深入探讨一个关键问题——如何实现本地图片上传并预览的功能,并兼容IE6、IE7和IE8。这个功能对于现代浏览器来说是相当基础的,但在老版本的IE中,由于其内核和API的限制,实现起来并不简单。 首先,我们...
标题中提到的“兼容ie6、ie7、ie8 和FF的本地上传图片预览”主要涉及以下技术点: 1. **FileReader API**:这是一个HTML5的新特性,用于读取文件。在支持的浏览器中,可以通过`FileReader.readAsDataURL(file)`方法...
首先,我们需要理解图片预览的基本原理。在用户选择一个图片文件后,我们通过JavaScript获取文件数据,然后利用HTML5的FileReader API读取文件内容,将其转化为base64编码的字符串,最后将这个字符串嵌入到一个`...
在本文中,我们将深入探讨如何使用纯JavaScript...通过这个示例,你可以学习到如何利用JavaScript进行图片预览和大小检查,提升你的网页应用用户体验。记住,始终关注浏览器兼容性和用户体验,这在Web开发中至关重要。
例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法。 但在opera、safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览。 在研究了各种预览方法后,作为总结,写了这个程序,跟大家一起分享。
用js写的图片本地上传的预览,很有用的。 不论您使用的是 IE6 还是 IE7都兼容,均可以看到以下预览。
在IE6中,由于缺乏现代的API,开发者通常会使用ActiveX对象或滤镜来实现图片预览。例如,可以创建一个隐藏的IFrame,然后利用其内容窗口加载文件,通过修改IFrame中的HTML代码显示图片。但这种方法不跨浏览器,并且...