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

本地图片预览(支持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：

代码如下:

推荐阅读

firefox
解析：IE 浏览器中 IMG 元素 alt 属性的误用及其正确处理方式

在跨浏览器开发中，一个常见的问题是关于如何在鼠标悬停时显示图片提示信息。本文深入探讨了 IE 浏览器对 IMG 元素 alt 属性的特殊处理，并提供了最佳实践建议。 ... [详细]

蜡笔小新 2024-12-23 12:35:10
jq
技术分享：从动态网站提取站点密钥的解决方案

本文探讨了如何从动态网站中提取站点密钥，特别是针对验证码（reCAPTCHA）的处理方法。通过结合Selenium和requests库，提供了详细的代码示例和优化建议。 ... [详细]

蜡笔小新 2024-12-28 04:11:47
js
HTML5与JavaScript实现本地文件读取、写入及路径获取

本文探讨了如何利用HTML5和JavaScript在浏览器中进行本地文件的读取和写入操作，并介绍了获取本地文件路径的方法。HTML5提供了一系列API，使得这些操作变得更加简便和安全。 ... [详细]

蜡笔小新 2024-12-20 18:36:06
js
一个登陆界面

预览截图html部分123456789101112用户登入1314邮箱名称邮箱为空15密码密码为空16登 ... [详细]

蜡笔小新 2024-12-20 09:57:07
js
Selenium与Python结合实现网页滚动条的自动化控制

本文介绍了如何利用Selenium和Python通过执行JavaScript代码来控制网页中的滚动条，包括垂直和水平滚动条的控制，以及特定元素的聚焦技术。 ... [详细]

蜡笔小新 2024-12-14 14:25:02
js
利用CSS3和React实现数字滚动动画组件

在前端开发中，数字滚动动画是一个常见的需求。本文将详细介绍如何使用CSS3和React构建一个数字滚动动画组件，包括组件的代码实现和样式设计。如果您对HTML版本感兴趣，欢迎留言获取。 ... [详细]

蜡笔小新 2024-12-13 13:48:05
webkit
Python 爬虫实战：知乎美腿图片抓取

本文介绍如何使用Python编写一个简单的爬虫程序，从知乎问题页面抓取美腿图片。环境配置包括Windows 10操作系统，Python语言及其相关库。 ... [详细]

蜡笔小新 2024-12-02 09:30:45
js
精选10款jQuery内联编辑插件

本文精选了10款优秀的jQuery内联编辑插件，旨在帮助开发者实现页面内容的动态管理和即时编辑，提升用户体验。 ... [详细]

蜡笔小新 2024-11-30 13:27:42
firefox
Python与MySQL交互指南：从基础到进阶

本文深入探讨了Python与MySQL数据库的集成方法，包括数据库连接、数据表创建、索引管理、数据操作以及如何防止SQL注入等关键内容。适合初学者及希望提升数据库操作技能的开发者。 ... [详细]

蜡笔小新 2024-11-30 01:42:41
js
webpack js兼容性处理

index.js全部js兼容性处理。js内引入babelpolyfill全部js兼容性处理。babelpolyfillimportbabelpolyfill;constadd ... [详细]

蜡笔小新 2024-11-25 16:44:57
webkit
PHP中处理HTTP头部信息的方法与技巧

本文详细介绍了在PHP中如何获取和处理HTTP头部信息，包括通过cURL获取请求头信息、使用header函数发送响应头以及获取客户端HTTP头部的方法。同时，还探讨了PHP中$_SERVER变量的使用，以获取客户端和服务器的相关信息。 ... [详细]

蜡笔小新 2024-11-24 16:12:27
firefox
Ubuntu 7.10 常用软件安装指南

本文详细介绍了在Ubuntu 7.10操作系统上安装多种常用软件的方法，包括RAR压缩工具、即时通讯软件Pidgin、办公软件永中Office 2007试用版、多线程下载软件MultiGet及d4x、FTP客户端gFTP与FireFTP插件，以及P2P下载工具aMule。每部分都提供了具体的安装步骤和配置方法。 ... [详细]

蜡笔小新 2024-12-09 10:29:31
webkit
python翻译程序编写模板_python爬虫编写英译中小程序

1.选择一个翻译页面，我选择的是有道词典(http:dict.youdao.com)2.随便输入一个英语单词进行翻译，然后查看源文件，找到 ... [详细]

蜡笔小新 2024-11-29 12:52:41
firefox
解决iOS移动端300毫秒点击延迟问题

移动端浏览器为了识别用户的双击放大操作，通常会在点击后引入300毫秒的延迟。虽然这种延迟在日常使用中可能不易察觉，但对于需要即时响应的应用（如网页游戏）来说，消除这一延迟至关重要。 ... [详细]

蜡笔小新 2024-11-27 20:34:45
js
探索HTML5：十五个关键的新特性

本文深入探讨了HTML5中十五个重要的新特性，为开发者提供了详细的指南。 ... [详细]

蜡笔小新 2024-11-26 19:09:22

lx比比2502869217

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

Tags | 热门标签

RankList | 热门文章