`
zzc1684
  • 浏览: 1224530 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

javascript上传图片前预览图片兼容大多数浏览器

阅读更多

 

 

上传图片前预览图片这种效果应用比较广泛,实现的方也大同小异,下面为大家介绍下,在javascript中是如何实现的,感兴趣的朋友可以参考下

 

<div id="localImag"><img id="preview" width="-1" height="-1" style="display:none" /></div>
<asp:FileUpload ID="file_head" runat="server" onchange="javascript:setImagePreview();" />

 

 

<script type="text/javascript">
function setImagePreview() {
var docObj = document.getElementById("ctl00_ContentMain_file_head");
var fileName = docObj.value;
if (!fileName.match(/.jpg|.gif|.png|.bmp/i)) {
alert('您上传的图片格式不正确,请重新选择!');
return false;
}

var imgObjPreview = document.getElementById("preview");
if (docObj.files && docObj.files[0]) {
//火狐下,直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '63px';
imgObjPreview.style.height = '63px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
if (window.navigator.userAgent.indexOf("Chrome") >= 1 || window.navigator.userAgent.indexOf("Safari") >= 1) {
imgObjPreview.src = window.webkitURL.createObjectURL(docObj.files[0]);
}
else {
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}
} else {
//IE下,使用滤镜
docObj.select();
docObj.blur();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "63px";
localImagId.style.height = "63px";
//图片异常的捕捉,防止用户修改后缀来伪造图片
try {
localImagId.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
} catch (e) {
alert("您上传的图片格式不正确,请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}

</script> 

 

此js解决360浏览器显示图片问题。因为360浏览器6.2用的是Chrome的内核,而

window.URL.createObjectURL(docObj.files[0]); 

 

只有在火狐下才认得到,chrome中不认识window.URL.createObjectURL,所有用Safari的window.webkitURL.createObjectURL

 

分享到:
评论

相关推荐

    js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器不兼容

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

    图片上传预览(兼容所有主流浏览器)

    本技术讨论主要围绕“图片上传预览(兼容所有主流浏览器)”这一主题展开,我们将深入探讨如何利用JavaScript实现这一功能,并确保其在各种主流浏览器中运行良好。 首先,我们来理解一下“图片上传预览”的概念。当...

    js预览图片兼容所有浏览器

    在JavaScript编程中,预览图片是一项常见的需求,尤其是在网页上传图片功能中。为了实现这个功能并且确保兼容性,我们需要处理各种浏览器之间的差异,包括那些较老的版本,如Internet Explorer 6、7和8,以及Firefox...

    js中图片实时预览(兼容浏览器)

    在Web开发中,实现图片的实时预览是一项常见的需求,尤其是在用户上传图片之前提供一个预览功能。传统的实现方式是直接通过文件路径来显示图片,但由于浏览器的安全性限制,Web应用无法获取本地文件系统的图片路径。...

    上传图片预览效果-兼容多种浏览器

    在IT领域,尤其是在Web开发中,图片上传预览功能是一个非常常见的需求,它允许用户在正式上传图片前先查看预览效果,提升了用户体验。本文将深入探讨如何实现一个兼容多种浏览器的图片上传预览功能,并基于提供的...

    纯javascript实现上传图片前图片预览,判断图片大小

    在本文中,我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能,并且检查图片的大小,确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用,因为它允许...

    兼容主流浏览器的图片预览

    在网页开发中,图片预览是一项常见的功能,特别是在用户上传图片时,为了提供良好的用户体验,让用户能在上传前预览图片效果。"兼容主流浏览器的图片预览"这一主题旨在确保不论用户使用何种浏览器,都能正常预览图片...

    jquery实现选择图片预览,兼容各大主流浏览器

    本文将详细介绍如何使用jQuery实现一个兼容各大主流浏览器(如谷歌、IE、360浏览器、火狐等)的图片预览功能。 ### 1. jQuery简介 jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画...

    上传文件前,本地预览图片功能,支持所有主流浏览器

    在本主题中,我们将深入探讨如何实现"上传文件前,本地预览图片功能,支持所有主流浏览器"。 首先,我们需要了解这个功能的核心技术——HTML5的File API。File API提供了在浏览器中读取、操作和处理文件的能力,这...

    兼容IE6,IE7,IE8和Firefox的图片上传预览效果

    标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题,这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer(IE6, IE7, IE8)对现代Web标准的支持不足,而...

    上传头像图片带预览剪切JAVA版-兼容所有浏览器.zip

    "上传头像图片带预览剪切JAVA版-兼容所有浏览器"是一个典型的Web应用功能,它允许用户选择并预览图片,然后进行剪切操作,最终上传作为自己的头像。这个功能在社交网络、论坛、个人资料编辑等场景中非常常见。下面将...

    javascript 上传图片预览效果

    在JavaScript编程中,实现上传图片的预览效果是一项常见的需求,尤其在网页表单和多媒体交互应用中。这里,我们关注的是如何在用户选择图片文件后,在上传之前就能在页面上展示图片的预览,而无需等待实际的上传过程...

    fileupload上传图片前预览

    下面将详细介绍如何在ASP.NET中实现FileUpload控件上传图片前的预览功能,同时兼容IE6、IE7、IE8以及Firefox等主流浏览器。 1. **HTML结构与JavaScript预览** 在前端页面上,我们需要一个FileUpload控件让用户选择...

    上传图片并且浏览--各种浏览器都兼容的代码

    以上是实现“上传图片并且浏览—各种浏览器都兼容的代码”所需的主要技术点。在实际项目中,可能还需要考虑其他因素,如安全(防止上传恶意文件)、用户体验(如进度条显示上传进度)、性能优化(如文件切片上传)等...

    js上传前预览图片,兼容IE,firefox,google

    以下是一个基本的JavaScript代码示例,展示了如何在不同浏览器中预览图片: ```javascript function previewImage(fileInput) { var files = fileInput.files; if (files && files.length &gt; 0) { for (var i =...

    js上传图片预览图片.pdf

    在JavaScript代码中,我们可以通过 `sender.files[0]` 获取选择的文件对象,并通过 `getAsDataURL()` 方法将其转换为DataURL形式,以便在浏览器中预览图片。 2. 图片预览实现 在CSS中,我们定义了三个对象:`#...

    上传图片预览插件,jquery插件,支持多种浏览器

    "上传图片预览插件,jquery插件,支持多种浏览器"这个标题所涉及的知识点,主要集中在前端开发的jQuery库以及跨浏览器兼容性问题上。描述中提到的“解决IE浏览器、谷歌浏览器、火狐浏览器,360浏览器等显示本地上传...

    javascript图片预览

    JavaScript图片预览是一种常见的网页交互功能,允许用户在点击或悬停在图片链接上时预览图片内容,而无需实际加载整个图片。这种技术在网页设计中广泛应用,尤其是在处理大量图片展示或者上传功能时,提高了用户体验...

Global site tag (gtag.js) - Google Analytics