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 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
基于jquery循环map功能的代码
Feb 26 Javascript
JS自动缩小超出大小的图片
Oct 12 Javascript
JS中使用sort结合localeCompare实现中文排序实例
Jul 23 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
理解JavaScript事件对象
Jan 25 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
JS使用正则表达式过滤多个词语并替换为相同长度星号的方法
Aug 03 Javascript
详细谈谈AngularJS的子级作用域问题
Sep 05 Javascript
解决Webpack 热部署检测不到文件变化的问题
Feb 22 Javascript
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
JavaScript与JQuery框架基础入门教程
Jul 15 Javascript
兼容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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
PHP初学者常见问题集合 修正版(21问答)
2010/03/23 PHP
PHP中使用smarty生成静态文件的例子
2014/04/24 PHP
PHP中文乱码解决方案
2015/03/05 PHP
PHP+百度AI OCR文字识别实现了图片的文字识别功能
2019/05/08 PHP
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
js unicode 编码解析关于数据转换为中文的两种方法
2014/04/21 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
2014/06/26 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
2016/01/18 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
jQuery链式调用与show知识浅析
2016/05/11 Javascript
url中的特殊符号有什么含义(推荐)
2016/06/17 Javascript
js当前页面登录注册框,固定div,底层阴影的实例代码
2016/10/04 Javascript
浅谈js获取ModelAndView值的问题
2018/03/28 Javascript
angularjs请求数据的方法示例
2019/08/06 Javascript
vue使用nprogress实现进度条
2019/12/09 Javascript
vue实现一个矩形标记区域(rectangle marker)的方法
2020/10/28 Javascript
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
python将一组数分成每3个一组的实例
2018/11/14 Python
如何使用python进行pdf文件分割
2019/11/11 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
舞蹈教育学专业推荐信
2013/11/27 职场文书
实习自我评价怎么写
2013/12/02 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
培训主管的职业生涯规划
2014/03/06 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
防沙治沙典型材料
2014/05/07 职场文书
环保标语口号
2014/06/13 职场文书
办理信用卡工作证明
2014/09/30 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
浅谈MySQL表空间回收的正确姿势
2021/10/05 MySQL