当前位置: 开发笔记 > 前端 > 正文

本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结

作者：lx比比2502869217 | 来源：互联网 | 2022-01-26 12:26

遇到的本地图片预览的需求,IE6下可以直接从file的value获取图片路径来显示预览,IE7和IE8下通过select获取file的图片路径，再用滤镜来显示预览，至于FireFox祥看本文吧，希望可以帮助到你

最近在Web项目开发过程中遇到的本地图片预览的需求，虽然最后因为其他原因没能使用，但是也算有些了解，整理出来。

这里我们按浏览器分，主要包括IE6，IE7/8 和Firefox3，不包含Opera，Safari和Chrome，这三个基本上需求很小，没有研究。

总结一下就是：
IE6下可以直接从file的value获取图片路径来显示预览。
IE7和IE8下通过select获取file的图片路径，再用滤镜来显示预览。
FireFox下调用file的getAsDataURL方法获取Data URI数据来显示预览。

下面是一个完整的Demo：

代码如下:

推荐阅读

html
css元素可拖动,如何使用CSS禁止元素拖拽？

一、用户行为三剑客以下3个CSS属性：user-select属性可以设置是否允许用户选择页面中的图文内容；user-modify属性可以设置是否允许输入 ... [详细]

蜡笔小新 2023-10-17 14:35:15
html
CSS |网格行结束属性

CSS|网格-行-结束属性原文:https://www.gee ... [详细]

蜡笔小新 2023-10-17 15:21:56
html
Voicewo在线语音识别转换jQuery插件的特点和示例

本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]

蜡笔小新 2023-12-13 20:01:16
html
使用正则表达式爬取36Kr网站首页新闻的操作步骤和代码示例

本文介绍了使用正则表达式来爬取36Kr网站首页所有新闻的操作步骤和代码示例。通过访问网站、查找关键词、编写代码等步骤，可以获取到网站首页的新闻数据。代码示例使用Python编写，并使用正则表达式来提取所需的数据。详细的操作步骤和代码示例可以参考本文内容。 ... [详细]

蜡笔小新 2023-12-12 19:16:21
html
网页播放视频的三种实现方式

本文介绍了网页播放视频的三种实现方式，分别是使用html5的video标签、使用flash来播放以及使用object标签。其中，推荐使用html5的video标签来简单播放视频，但有些老的浏览器不支持html5。另外，还可以使用flash来播放视频，需要使用object标签。 ... [详细]

蜡笔小新 2023-12-10 13:24:30
html
this prototype 闭包总结

this对象整理下思路：一般用到this中的情景：1.构造方法中functionA(){this.nameyinshen;}varanewA() ... [详细]

蜡笔小新 2023-10-16 13:42:47
html
pyecharts 介绍

一、pyecharts介绍ECharts，一个使用JavaScript实现的开源可视化库，可以流畅的运行在PC和移动设备上，兼容当前绝大部 ... [详细]

蜡笔小新 2023-10-16 08:29:03
html
axure 动态面板自动适应浏览器宽度_Axure技能：自适应移动设备屏幕大小（进阶教程）...

《Axure新技能：自适应手机屏幕大小》相信不少人都已经看过，并对设置方法已经很熟悉了，但该教程只能适应iphone6的屏幕尺寸的比例&# ... [详细]

蜡笔小新 2023-10-15 15:56:01
html
Firefox火狐浏览器关闭到http://detectportal.firefox.com的流量问题解决办法

本文介绍了使用Firefox火狐浏览器时出现关闭到http://detectportal.firefox.com的流量问题，并提供了解决办法。问题的本质是因为火狐默认开启了Captive portal技术，当连接需要认证的WiFi时，火狐会跳出认证界面。通过修改about:config中的network.captive-portal-service.en的值为false，可以解决该问题。 ... [详细]

蜡笔小新 2023-12-14 09:02:36
firefox
使用 Ubuntu 中的 Python 获取浏览器历史记录

使用Ubuntu中的Python获取浏览器历史记录原文: ... [详细]

蜡笔小新 2023-12-14 08:57:59
html
Python瓦片图下载、合并、绘图、标记的代码示例

本文提供了Python瓦片图下载、合并、绘图、标记的代码示例，包括下载代码、多线程下载、图像处理等功能。通过参考geoserver，使用PIL、cv2、numpy、gdal、osr等库实现了瓦片图的下载、合并、绘图和标记功能。代码示例详细介绍了各个功能的实现方法，供读者参考使用。 ... [详细]

蜡笔小新 2023-12-13 12:14:55
html
HTML学习02 图像标签的使用和属性

本文介绍了HTML中图像标签的使用和属性，包括定义图像、定义图像地图、使用源属性和替换文本属性。同时提供了相关实例和注意事项，帮助读者更好地理解和应用图像标签。 ... [详细]

蜡笔小新 2023-12-13 11:31:26
html
响应式页面的概述和实现方式

本文介绍了响应式页面的概念和实现方式，包括针对不同终端制作特定页面和制作一个页面适应不同终端的显示。分析了两种实现方式的优缺点，提出了选择方案的建议。同时，对于响应式页面的需求和背景进行了讨论，解释了为什么需要响应式页面。 ... [详细]

蜡笔小新 2023-12-11 12:37:10
html
ECMA262规定typeof操作符的返回值和instanceof的使用方法

本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值，以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]

蜡笔小新 2023-12-10 17:31:51
html
Python爬虫_HTTP标准

文章目录简介HTTP请求过程HTTP状态码含义HTTP头部信息Cookie状态管理HTTP请求方式简介HTTP协议（超文本传输协议）是用于从WWW服务 ... [详细]

蜡笔小新 2023-10-15 14:59:43

lx比比2502869217

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章