js 上传图片预览问题
程序员文章站
2024-02-03 20:10:28
最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现ie8和火狐不能显示,弄了很久,早上终于解决了很高兴。故跟大家分享下,我也多是网上找的,自己总结的一下,希望对...
最近也经常遇到浏览器兼容的问题,昨天遇到上传图片预览问题,发现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();
我把它的路径弹出了看,发现是一串很长的东西,好像是制定的图片类型等等,不过总算是解决了
我们一般根据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();
我把它的路径弹出了看,发现是一串很长的东西,好像是制定的图片类型等等,不过总算是解决了
下一篇: 持续集成Jenkins