js 上传图片预览问题


Posted in Javascript onDecember 06, 2010

最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现IE8和火狐不能显示,弄了很久,早上终于解决了很高兴。故跟大家分享下,我也多是网上找的,自己总结的一下,希望对大家有点帮助。

我们一般根据IE6、IE7进行开发的时候写图片预览的代码是:

document.getElementById("img").src = document.getElementById("file").value;

还有一种方式

<div style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod = scale); width:300px; height:300px;" id="div1"></div> 
<script type="javascript"> 
document.getElementById("div1").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.getElementById("file").value; 
</script>

IE8

在IE8和火狐上直接用户控件.value得到的只是文件名称而不是完整路径

var isIE = (document.all) ? true : false; 
var isIE7 = isIE && (navigator.userAgent.indexOf('MSIE 7.0') != -1); 
var isIE8 = isIE && (navigator.userAgent.indexOf('MSIE 8.0') != -1); 
var file = document.getElementById("file"); 
if (isIE7 || isIE8) { 
file.select(); 
img = document.selection.createRange().text; 
document.selection.empty(); 
document.getElementById("img").src = img; 
}

火狐

在火狐上问题很多,在网上找了很多东西都无法实现,首先要获得
在火狐上问题很多,在网上找了很多东西都无法实现。

1。首先要获得上传问题的完整路径,用下面的方法是可以得完整路径

if (navigator.userAgent.indexOf("Firefox") != -1) { 

try {netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect"); 
} catch (e) { 
} 
img = document.getElementById("file").value; 

}

2。但直接这样给图片修改路径(src)没有反应,后来发现有人说要在火狐显示本地图片要在前面加"file:///"

if (!document.all) { 
img = img.replace(/\\/g, "/"); 
img = "file:///" + img 
}

这样如果是页面上放个图片是可以显示,不过前提条件是不能放在IIS上,我的网站是部署在IIS上的这样就算我直接放个图片地址是本地图片也显示不了,所有我有本郁闷到了,而且很多人都说火狐有安全设置不能预览本地图片,我差点就放弃了。

最后在网上在到一个可以预览的例子,仔细分析发现原来要在火狐上实现预览图片其实代码也很简单:

document.getElementById("img").src = document.getElementById("file").files[0].getAsDataURL();

我把它的路径弹出了看,发现是一串很长的东西,好像是制定的图片类型等等,不过总算是解决了

Javascript 相关文章推荐
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
JS中Date日期函数中的参数使用介绍
Jan 02 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
JavaScript 模块的循环加载实现方法
Dec 13 Javascript
使用plupload自定义参数实现多文件上传
Jul 19 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
import与export在node.js中的使用详解
Sep 28 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
用原生 JS 实现 innerHTML 功能实例详解
Apr 03 Javascript
微信小程序使用前置摄像头拍照
Oct 22 Javascript
vue 实现弹窗关闭后刷新效果
Apr 08 Vue.js
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 #Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 #Javascript
jquery ui dialog ie8出现滚动条的解决方法
Dec 06 #Javascript
jquery实现心算练习代码
Dec 06 #Javascript
初窥JQuery(二)事件机制(2)
Dec 06 #Javascript
2010年最佳jQuery插件整理
Dec 06 #Javascript
jquery提升性能最佳实践小结
Dec 06 #Javascript
You might like
php 图片加水印与上传图片加水印php类
2010/05/12 PHP
ThinkPHP使用UTFWry地址库进行IP定位实例
2014/04/01 PHP
Smarty模板简单配置与使用方法示例
2016/05/23 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
display和visibility的区别示例介绍
2014/02/26 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
jquery实现两边飘浮可关闭的对联广告
2015/11/27 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
JavaScript禁止微信浏览器下拉回弹效果
2017/05/16 Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
2017/11/21 Javascript
Vue父子组件双向绑定传值的实现方法
2018/07/31 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
layui-select动态选中值的例子
2019/09/23 Javascript
详解python字节码
2018/02/07 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
PyCharm导入python项目并配置虚拟环境的教程详解
2019/10/13 Python
python的faker库用法
2019/11/28 Python
python实现时间序列自相关图(acf)、偏自相关图(pacf)教程
2020/06/03 Python
详解python tkinter包获取本地绝对路径(以获取图片并展示)
2020/09/04 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
Ted Baker美国官网:英国时尚品牌
2018/10/29 全球购物
印度尼西亚最好的小工具在线商店:Erafone.com
2019/03/26 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
天游软件面试
2013/11/23 面试题
外贸业务员求职信范文
2013/12/12 职场文书
测绘专业大学生职业生涯规划书
2014/02/10 职场文书
支部书记四风对照材料
2014/08/28 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
合伙经营协议书范本
2014/09/13 职场文书
面试通知单大全
2015/04/20 职场文书
HTML5 新增内容和 API详解
2021/11/17 HTML / CSS
USB TYPE-C 或将成为所有智能手机充电标准
2022/04/21 数码科技
服务器间如何实现文件共享
2022/05/20 Servers