火狐 IE 实现图片本地预览 demo
来源:互联网 发布:网络台球 编辑:程序博客网 时间:2024/06/10 12:25
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。
使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验。
但随着浏览器安全性的提高,要实现图片上传预览也越来越困难。
不过群众的智慧是无限的,网上已经有很多变通或先进的方法来实现。
例如ie7/ie8的滤镜预览法,firefox 3的getAsDataURL方法。
但在opera、safari和chrome还是没有办法实现本地预览,只能通过后台来支持预览
demo:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>图片上传预览ie6,7,8, firefox</title><script language="javascript"> function checkPic(){ var picPath=document.getElementById("picPath").value; var type=picPath.substring(picPath.lastIndexOf(".")+1,picPath.length).toLowerCase(); if(type!="jpg"&&type!="bmp"&&type!="gif"&&type!="png"){ alert("请上传正确的图片格式"); return false; } return true; } //图片预览 function PreviewImage(divImage,upload,width,height) { if(checkPic()){ try{ var imgPath; //图片路径 var Browser_Agent=navigator.userAgent; //判断浏览器的类型 if(Browser_Agent.indexOf("Firefox")!=-1){ //火狐浏览器 imgPath = upload.files[0].getAsDataURL(); document.getElementById(divImage).innerHTML = "<img id='imgPreview' src='"+imgPath+"' width='"+width+"' height='"+height+"'/>"; }else{ //IE浏览器 var Preview = document.getElementById(divImage); Preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = upload.value; Preview.style.width = width; Preview.style.height = height; } }catch(e){ alert("请上传正确的图片格式"); } } }</script></head><body> 产品图片 <input type="file" id="picPath" name="doc" onChange="PreviewImage('Preview',this,78,38);" /><div id="Preview" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);"> </div></body></html>
0 0
- 火狐 IE 实现图片本地预览 demo
- 图片上传预览(兼容火狐和IE)
- 兼容火狐 IE的图片上传预览
- 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
- 兼容ie[6-9]、火狐、Chrome、opera、maxthon3、360浏览器的js本地图片预览
- 浏览器本地预览图片并Ajax上传到服务器(谷歌火狐 ,IE不兼容)
- 预览本地图片(ie/firefox)
- js 预览本地图片 兼容Ie
- IE火狐谷歌等主流浏览器--图片上传预览
- 图片上传并预览(IE,火狐浏览器兼容问题)
- html5中IE、火狐、谷歌图片上传预览
- html 图片预览上传(支持ie,google,火狐)
- JavaScript实现本地图片预览
- js 实现 本地图片预览
- js实现本地图片预览
- 兼容IE8、火狐的本地图片预览+等比例缩放
- 兼容IE、新版Chrome、Firefox,实现本地图片等比例缩放预览
- JavaScript实现本地图片上传预览功能(兼容IE、chrome、FF)
- 《GPU的革命》文章整理
- 2.pppoe客户端宽带拨号
- 第五章结构图
- ubuntu 14.04 安装 Java 常用软件
- 关于如何使用控制台将mysql数据库进行导入和导出问题
- 火狐 IE 实现图片本地预览 demo
- 【操作系统】Dos下的多任务系统
- UITableViewRowAction详解(iOS8新API)
- Windows下多个版本Qt的安装配置
- PinnedHeaderListView在顶端不是屏幕顶端时title挤压失效的问题
- 黑马程序员-OC的核心语法
- C#基础学习笔记
- Struts2框架判断用户名是否已存在
- Activity的四种launchMode