整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

10个对web开发人员有用的HTML文件上传技巧

本文已经过原作者 Tapas Adhikary 授权翻译

简介

上传文件功能可以说是项目经常出现的需求。从在社交媒体上上传照片到在求职网站上发布简历，文件上传无处不在。在本文中，我们将讨论 HTML文件上传支持的10种用法，希望对你有用。

1. 单文件上传

我们可以将input 类型指定为file，以在Web应用程序中使用文件上传功能。

<input type="file" id="file-uploader">

input filte 提供按钮上传一个或多个文件。默认情况下，它使用操作系统的本机文件浏览器上传单个文件。成功上传后，File API 使得可以使用简单的 JS 代码读取File对象。要读取File对象，我们需要监听 change事件。

首先，通过id获取文件上传的实例:

const fileUploader = document.getElementById('file-uploader');

然后添加一个change 事件侦听器，以在上传完成后读取文件对象， 我们从event.target.files属性获取上传的文件信息：

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  console.log('files', files);
});

在控制台中观察输出结果，这里关注一下FileList数组和File对象，该对象具有有关上传文件的所有元数据信息。

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/rNLOyRm

2. 多文件上传

如果我们想上传多个文件，需要在标签上添加 multiple 属性：

<input type="file" id="file-uploader" multiple />

现在，我们可以上传多个文件了，以前面事例为基础，选择多个文件上传后，观察一下控制台的变化：

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/MWeamYp

3.了解文件元数据

每当我们上传文件时，File对象都有元数据信息，例如file name，size，last update time，type 等等。这些信息对于进一步的验证和特殊处理很有用。

const fileUploader = document.getElementById('file-uploader');

// 听更 change 件并读取元数据
fileUploader.addEventListener('change', (event) => {
  // 获取文件列表数组
  const files = event.target.files;

  // 遍历并获取元数据
  for (const file of files) {
    const name = file.name;
    const type = file.type ? file.type: 'NA';
    const size = file.size;
    const lastModified = file.lastModified;
    console.log({ file, name, type, size, lastModified });
  }
});

下面是单个文件上传的输出结果：

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/gOMaRJv

4.了解 accept 属性

我们可以使用accept属性来限制要上载的文件的类型，如果只想上传的文件格式是 .jpg，.png 时，可以这么做：

<input type="file" id="file-uploader" accept=".jpg, .png" multiple>

在上面的代码中，只能选择后缀是.jpg和.png的文件。

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/OJXymRP

5. 管理文件内容

成功上传文件后显示文件内容，站在用户的角度上，如果上传之后，没有一个预览的，就很奇怪也不体贴。

我们可以使用FileReader对象将文件转换为二进制字符串。然后添加load 事件侦听器，以在成功上传文件时获取二进制字符串。

// FileReader 实例
const reader = new FileReader();

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];

  reader.readAsDataURL(file);

  reader.addEventListener('load', (event) => {
    const img = document.createElement('img');
    imageGrid.appendChild(img);
    img.src = event.target.result;
    img.alt = file.name;
  });
});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/zYBvdjZ

6.验证文件大小

如果用户上传图片过大，为了不让服务器有压力，我们需要限制图片的大小，下面是允许用户上传小于 1M 的图片，如果大于 1M 将上传失败。

fileUploader.addEventListener('change', (event) => {
  // Read the file size
  const file = event.target.files[0];
  const size = file.size;

  let msg = '';

 // 检查文件大小是否大于1MB
  if (size > 1024 * 1024) {
      msg = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`;
  } else {
      msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`;
  }
  feedback.innerHTML = msg;
});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/pobjMKv

7. 显示文件上传进度

更好的用户体验是让用户知道文件上传进度，前面我们用过了FileReader以及读取和加载文件的事件。

const reader = new FileReader();

FileReader还有一个progress 事件，表示当前上传进度，配合HTML5的progress标签，我们来模拟一下文件的上传进度。

reader.addEventListener('progress', (event) => {
  if (event.loaded && event.total) {
    // 计算完成百分比
    const percent = (event.loaded / event.total) * 100;
    // 将值绑定到 `progress`标签
    progress.value = percent;
  }
});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/eYzpwYj

8. 怎么上传目录上传?

我们可以上传整个目录吗?嗯，这是可能的，但有一些限制。有一个叫做webkitdirectory的非标准属性(目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传)，它允许我们上传整个目录。

目前只有谷歌浏览器还有Microsoft Edge支持按照文件夹进行上传，具体可以看下百度云盘的网页版的上传按钮，在火狐下就支持按照文件进行上传，而在谷歌和Edge下，就会给用户提供一个下拉，让用户选择是根据文件进行上传还是根据文件夹进行上传。

<input type="file" id="file-uploader" webkitdirectory />

用户必须需要确认才能上传目录

用户单击“上传”按钮后，就会进行上传。这里要注意的重要一点。FileList数组将以平面结构的形式包含有关上载目录中所有文件的信息。对于每个File对象，webkitRelativePath属性表示目录路径。

例如，上传一个主目录及其下的其他文件夹和文件：

现在，File 对象将将webkitRelativePath填充为：

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/dyXYRKp

9. 拖拽上传

不支持文件上传的拖拽就有点 low 了，不是吗?我们来看看如何通过几个简单的步骤实现这一点。

首先，创建一个拖放区域和一个可选的区域来显示上传的文件内容。

<div id="container">
  <h1>Drag & Drop an Image</h1>
  <div id="drop-zone">
    DROP HERE
  </div>

  <div id="content">
    Your image to appear here..
  </div>

</div>

通过它们各自的ID获取dropzone和content 区域。

 const dropZone = document.getElementById('drop-zone');
 const content = document.getElementById('content');

添加一个dragover 事件处理程序，以显示将要复制的内容的效果:

dropZone.addEventListener('dragover', event => {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
});

接下来，我们需要一个drop事件监听器来处理。

dropZone.addEventListener('drop', event => {
  // Get the files
  const files = event.dataTransfer.files;


});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/ExyVoXN

10. 使用objectURL处理文件

有一个特殊的方法叫做URL.createobjecturl()，用于从文件中创建唯一的URL。还可以使用URL.revokeObjectURL()方法来释放它。

URL.revokeObjectURL() 静态方法用来释放一个之前已经存在的、通过调用 URL.createObjectURL() 创建的 URL 对象。当你结束使用某个 URL 对象之后，应该通过调用这个方法来让浏览器知道不用在内存中继续保留对这个文件的引用了。


fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];
  
  const img = document.createElement('img');
  imageGrid.appendChild(img);
  img.src = URL.createObjectURL(file);
  img.alt = file.name;
});

如果大家看到这里，有点激动，想手贱一下，可以 CodePen 玩玩，地址：https://codepen.io/atapas/pen/BazzaoN

总结

无论何时，如果你还想学习本文涉及的一些知识，你可以在这里尝试。

https://html-file-upload.netlify.app/

irefox 浏览器

Firefox 浏览器，中文名"火狐浏览器"，是来自 Mozilla 的一款免费的开源 web 浏览器。

Firefox 发布于 2004 年，也是当今最流行的浏览器之一。

Firefox 可以在 Windows、Mac OS X、Linux 和 Android 上运行。

下载 Firefox

Firefox 统计

下表是 浏览器统计信息 中关于 Firefox 使用情况的细节：

2014总计 FF 30FF 29FF 28FF 27FF 26FF 25更旧
5 月24.9%



0.1%14.2%5.2%0.5%0.5%0.2%4.2%
4 月25.0%




1.1%18.1%1.2%0.7%0.3%3.6%
3 月25.6%




0.3%3.4%16.3%1.0%0.4%4.2%
2 月26.4%





0.6%11.7%8.7%0.6%4.8%
1 月26.9%






1.2%18.9%1.0%5.8%













2013总计FF 26FF 25FF 24FF 23FF 22FF 21FF 20FF 19FF 18FF 17更旧
12 月26.8%6.9%13.3%1.1%0.5%0.4%0.3%0.4%0.2%0.2%0.5%3.0%
11 月26.8%1.0%16.2%3.5%0.7%0.5%0.4%0.4%0.3%0.2%0.7%2.9%
10 月27.2%0.1%1.3%18.4%2.0%0.7%0.4%0.5%0.3%0.4%0.7%2.5%
9 月27.8%0.1%0.3%3.1%17.5%1.0%0.6%0.5%0.3%0.4%0.9%3.2%
8 月28.2%

0.7%10.8%9.9%1.0%0.7%0.4%0.4%0.8%3.5%
7 月28.9%

0.1%1.2%18.0%3.1%1.0%0.5%0.5%0.8%3.7%
6 月28.9%


0.1%1.7%19.8%1.3%0.7%0.5%0.8%4.0%
5 月27.7%


0.1%0.5%6.5%14.0%0.9%0.6%0.8%4.3%
4 月27.9%



0.1%0.7%12.9%7.3%0.8%0.8%5.9%
3 月28.5%




0.1%0.9%19.0%1.4%0.9%6.2%
2 月29.6%




0.1%0.2%4.6%16.0%1.2%7.5%
1 月30.2%





0.1%0.6%12.4%8.3%8.8%













2012总计FF 17FF 16FF 15FF 14FF 13FF 12FF 11FF 9-10FF 4-8FF 3.6更旧
12 月31.1%16.3%5.6%1.3%1.0%0.7%1.1%0.6%1.2%1.2%0.8%1.3%
11 月31.2%2.5%19.4%1.8%1.2%0.8%1.2%0.6%1.3%1.3%0.8%0.3%
10 月31.8%0.4%9.5%12.4%1.8%1.0%1.4%0.8%1.4%1.6%1.0%0.5%
9 月32.2%
0.8%17.7%4.8%1.3%1.6%1.0%1.6%1.9%1.2%0.3%
8 月32.8%

1.9%20.3%2.1%1.8%1.1%1.7%2.1%1.2%0.7%
7 月33.7%

0.3%7.4%15.2%3.0%1.3%2.1%2.4%1.5%0.5%
6 月34.4%


0.6%12.1%12.5%1.6%2.3%2.7%1.8%0.8%
5 月35.2%


0.1%0.8%21.4%3.8%2.7%3.4%2.3%0.7%
4 月35.8%



0.1%2.6%21.6%3.8%3.8%3.1%0.8%
3 月36.3%




0.3%9.1%17.3%5.0%3.7%0.9%
2 月37.1%




0.1%0.6%24.2%6.5%4.3%1.4%
1 月37.2%





0.1%18.6%12.4%5.0%1.1%













2011总计 FF 9FF 8FF 7FF 6FF 5FF 4FF 3.6FF 3.5FF 3.0更旧
12 月37.7%
1.8%22.8%2.1%1.5%1.2%1.3%5.6%0.6%0.5%0.3%
11 月38.1%
0.4%12.7%11.5%2.2%1.5%1.5%6.9%0.6%0.5%0.3%
10 月38.7%

0.6%19.8%5.1%2.0%1.8%7.9%0.7%0.5%0.3%
9 月39.7%


1.5%22.2%3.1%2.2%9.0%0.7%0.7%0.3%
8 月40.6%



9.5%15.9%2.9%10.3%0.8%0.8%0.4%
7 月42.0%



0.6%23.2%4.6%11.5%0.9%0.9%0.3%
6 月42.2%




5.6%21.5%12.3%1.5%0.9%0.4%
5 月42.4%




0.3%23.4%15.6%1.8%1.0%0.3%
4 月42.9%





15.7%23.8%2.1%1.1%0.2%
3 月42.2%





5.2%32.9%2.5%1.3%0.3%
2 月42.4%





1.9%35.8%2.9%1.5%0.3%
1 月42.8%





1.5%36.1%3.1%1.7%0.4%













2010总计 FF 4FF 3.6FF 3.5FF 3.0更旧
12 月43.5%





1.1%36.5%3.5%2.0%0.4%
11 月44.0%





0.8%36.9%3.8%2.0%0.5%
10 月44.4%





0.7%36.2%4.5%2.4%0.6%
9 月45.1%





0.8%35.3%5.6%2.9%0.5%
8 月45.8%





0.6%35.2%6.1%3.1%0.6%
7 月46.4%





0.4%34.5%7.3%3.6%0.6%
6 月46.6%






32.7%9.1%4.0%0.8%
5 月46.9%






31.7%10.0%4.4%0.8%
4 月46.4%






29.4%11.5%4.6%0.9%
3 月46.2%






22.1%17.6%5.6%0.9%
2 月46.5%






10.5%28.5%6.5%1.0%
1 月46.3%






2.2%34.2%8.6%1.3%













2009总计 FF 3.5FF 3.0FF 2.0更旧
12 月46.4%






33.3%11.2%1.2%0.7%
11 月47.0%






31.4%13.6%1.5%0.5%
10 月47.5%






29.8%15.7%1.6%0.4%
9 月46.6%






27.3%17.2%1.8%0.3%
8 月47.4%






21.0%24.0%1.9%0.5%
7 月47.9%






12.1%33.3%1.9%0.6%
6 月47.3%






1.2%43.4%2.3%0.4%
5 月47.7%







44.3%2.9%0.5%
4 月47.1%







43.4%2.8%0.9%
3 月46.5%







42.2%3.0%1.3%
2 月46.4%







41.5%3.8%1.1%
1 月45.5%







39.5%4.6%1.4%













2008总计 FF 3.0FF 2.0FF 1.5Moz
12 月44.7%






38.1%6.2%0.1%0.3%
11 月44.6%






35.9%8.0%0.3%0.4%
10 月44.5%






34.9%8.7%0.4%0.5%
9 月43.1%






31.9%10.1%0.6%0.5%
8 月44.2%






25.5%17.5%0.7%0.5%
7 月43.1%






20.7%21.1%0.8%0.5%
6 月41.5%






8.9%31.2%0.9%0.5%
5 月40.5%






2.9%35.9%1.0%0.7%

以上统计数据是基于 W3CSchool 网站的用户。

Firefox 29

Firefox 29 发布于 2014 年 4 月 29 日。

Firefox 29 可以在 Windows、Mac、Linux 和 Android 上运行。

新特性：

  • 一些重新设计的工具和一个更新的界面

  • 增强的火狐同步服务

  • 菜单移到右上角

  • 新的 "定制工具"，您可以在其中添加或者移动功能和附加组件

  • 用户可以通过单击创建一个书签

  • 支持 CSS box-sizing 属性（不带 -moz- 前缀）

  • 支持 HTML5 input type="number"

  • 支持 HTML5 input type="color"

Firefox 28

Firefox 28 发布于 2014 年 3 月 18 日。

Firefox 28 可以在 Windows、Mac、Linux 和 Android 上运行。

新特性：

  • Mac OS X：通知中心（Notification Center）支持 web 通知

  • 水平的 HTML5 音频/视频的音量控制

  • 支持 WebM 中的 Opus

  • 实现 VP9 视频解码

  • 支持 MathML 2.0 'mathvariant' 属性

  • 后台线程报告

  • 支持布局中的多线 flexbox

Firefox 27

Firefox 27 发布于 2014 年 2 月 4 日。

Firefox 27 可以在 Windows、Mac、Linux 和 Android 上运行。

新特性：

  • 对 Firefox Social API 的一个重大更新 - 现在允许用户同时运行多个服务

  • 支持 Google 的 SPDY 3.1 协议及传输层安全（TLS - Transport Layer Security）版本 1.1 和 1.2 - 这些基本上是著名的 SSL 加密协议的接班者

  • 使用 "all:unset" 重置样式表

  • 支持滚动的字段集

  • CSS 光标关键字 -moz-grab 和 -moz-grabbing 已没有前缀

  • 支持数学函数 Math.hypot()

  • 画布（Canvas）上支持虚线

Firefox 26

Firefox 26 发布于 2013 年 12 月 10 日。

Firefox 26 可以在 Windows、Mac、Linux 和 Android 上运行。

新特性：

  • 所有的 Java 插件默认为 "点击播放"

  • 密码管理器支持脚本生成的密码域

  • 在 Linux 上支持 H.264 编码的视频

  • 在 Windows XP 上支持 MP3 音频 - 这完成了跨 Windows 操作系统版本的 MP3 支持

  • 当站点请求 AppCache 时，移除提示

  • 支持 CSS3 image-orientation 属性

  • 新的应用程序管理器（App Manager） - 允许您在 Firefox 操作系统的手机和 Firefox 操作系统的模拟器上部署和调试 HTML5 程序

  • IndexedDB 可用作一个 "optimistic" 的存储区 - 使用 LRU 驱逐策略，不要求在池中存储任何提示和数据，只是一个短暂的临时存储

  • 减少内存使用，改进图像处理

Firefox 25

Firefox 25 发布于 2013 年 10 月 29 日。

Firefox 25 可以在 Windows、Mac、Linux 和 Android 上运行。

新特性：

  • 网络音频支持

  • CSS3 background-attachment:local 支持

  • iframe 文档内容可内联指定

  • 许多新的 ECMAScript 6 函数都是可用的

  • 探查器（Profiler）工具可以保存和导入测试结果

Firefox 24

Firefox 24 发布于 2013 年 9 月 17 日。

Firefox 24 可以在 Windows、Mac、Linux 和 Android 上运行。

新特性：

  • 启用对 WebRTC 的支持（在 Android 上）

  • 在 Android 上共享 NFC

  • 增加大规模关闭右侧标签功能

  • 在 OS X 10.7 上新的滚动条样式

  • 将聊天窗口拖拽成独立窗口

  • 优化在图像平铺和缩放时的图像周围的显著 SVG 渲染

  • 为增强的调试体验改进浏览器控制台，取代现有的错误控制台

  • 不再支持撤销列表功能

  • 不再支持从应用程序或配置文件目录加载的 sherlock 文件

Firefox 23

Firefox 23 发布于 2013 年 8 月 7 日。

Firefox 23 可以在 Windows、Mac、Linux 和 Android 手机版上运行。

新特性：

  • 新的 logo

  • 混合的内容阻止程序 - 通过完全限制 URL，来防止阅读网络上不安全的内容

  • 分享按钮 - 让用户只需要通过一个简单的点击，就可以把内容分享给朋友/家人

  • 专门为开发人员设计的网络监控工具 - 分解网站组件，并通知开发人员加载的时间

Firefox 22

Firefox 22 发布于 2013 年 6 月 25 日。

Firefox 22 可以在 Windows、Mac、Linux 和 Android 手机版上运行。

新特性：

  • 修复 14 个安全问题

  • 默认情况下，启用 WebRTC

  • OdinMonkey - 改进 JavaScript 性能

  • 可以改变 HTML5 音频/视频播放速率

  • 新的显示缩放选项，默认情况下是启用的 - 在高分辨率显示器上呈现较大的文本

  • 文本文件的自动换行

Firefox 21

Firefox 21 发布于 2013 年 5 月 14 日。

Firefox 21 可以在 Windows、Mac、Linux 和 Android 手机版上运行。

新特性：

  • 火狐健康报告（Firefox Health Report） - 一个调整浏览器的工具

  • 改进的启动时间

  • 支持 HTML5 <main> 元素

  • 支持带作用域的样式表

  • 三个 "不跟踪" 的选项："跟踪"、"不跟踪" 和 "未设定"

  • 扩展的社交 API（Social API） - 增加新的社交服务：Cliqz、Mixi 和 msnNOW，以及 Firefox 的 Facebook Messenger（一种桌面窗口聊天客户端）

Firefox 20

Firefox 20 发布于 2013 年 4 月 2 日。

Firefox 20 可以在 Windows、Mac、Linux 和 Android 手机版上运行。

新特性：

  • 新的下载管理器

  • 私人浏览窗口

  • 在单独的窗口中查看开发工具

  • 在浏览器不挂起的情况下关闭挂起的插件

  • <canvas> 现在支持混合模式

  • 各种 <audio> 和 <video> 的改进

Firefox 19

Firefox 19 发布于 2013 年 2 月 20 日。

Firefox 19 可以在 Windows、Mac 和 Linux 上运行。

新特性：

  • 新的内置的 PDF 阅读器 - 不需要插件即可阅读 PDF

  • @page 支持打印的文档

  • 导出画布内容为一个图像 - canvas 元素的内容可通过 toBlob() 导出为一个图像

  • 实现 CSS 视口-百分比长度单位（vh、vw、vmin 和 vmax）

  • 支持 CSS text-transform:full-width

  • 更快的启动

  • XForms 已被移除

Firefox 18

Firefox 18 发布于 2013 年 1 月 8 日。

Firefox 18 可以在 Windows、Mac OS X（Snow Leopard、Lion 和 Mountain Lion）、Linux 和 Android 上运行。

新特性：

  • IonMonkey - 新的 JavaScript 编译器（比 Firefox 17 快了 7% - 26%）

  • 支持视网膜显示

  • 内置的 PDF 查看器

  • 初步支持网络实时通信（WebRTC - Web Real Time Communication）

Firefox 17

Firefox 17 发布于 2012 年 11 月 20 日。

Firefox 17 可以在 Windows、Mac OS X、Linux 和 Android 上运行。

新特性：

  • 更新 Awesome Bar - 带有更大的图标

  • 标签动画

  • 社交 API（Social API） - 允许您通过浏览器登录到您的社交网络（Facebook）

  • 实现单击播放 - 为了防止弱势插件版本在未经过用户允许的情况下运行/li>

  • 为页面检查器中的 HTML/DOM 增加新的标记面板

  • 实现 HTML5 沙盒（sandbox）属性（用于 iframes）

  • 支持 Mountain Lion 的通知中心（Notification Center）

Firefox 16

Firefox 16 发布于 2012 年 10 月 9 日。

Firefox 16 可以在 Windows、Mac OS X、Linux 和 Android 上运行。

新特性：

  • 本地支持 PDF

  • 新的开发工具栏 - 允许您访问 Web 控制台、检查器和调试器。工具栏本身支持一些命令

  • 针对 OS X 的 VoiceOver 支持

  • Web 应用程序的支持 - 开始使用在 Mozilla app 目录 中的应用程序

  • 增量垃圾回收（Incremental Garbage Collection） - 加快您的浏览器，回收/重复使用 JavaScript 程序不再使用的内存

  • 在 Firefox 16 中支持无前缀化的 CSS3 动画、过渡效果（Transitions）、转换（Transforms）和渐变（Gradients）。

Firefox 15

Firefox 15 发布于 2012 年 8 月 28 日。

Firefox 15 可以在 Windows、Mac OS X、Linux 和 Android 上运行。

新特性：

  • 无缝背景更新

  • 停止由附加组件引起的大多数内存泄漏

  • 支持 SPDY 网络协议 v3

  • WebGL 增强功能

  • HTML5 - 支持 <source> 中的 media 属性

  • HTML5 - 支持 <audio> 和 <video> 中的 played 属性

  • CSS3 - 支持 CSS word-break 属性

  • 更快的调试器

  • 新的设计工具，允许 Web 开发人员在桌面和移动的站点视图之间进行切换

  • 本地支持 Opus 音频编解码器

Firefox 14

Firefox 14 发布于 2012 年 7 月 17 日。

Firefox 14 可以在 Windows、Mac OS X、Linux 和 Android 上运行。

新特性：

  • 隐私特征 - Firefox 使用 HTTPS 加密您的 Google 搜索

  • Bug 修复 - 为 Mac OS X Lion 提供全屏支持

  • 安全特性 - 您可以把经常访问的站点和信任的站点放入白名单

Firefox 13

Firefox 13 发布于 2012 年 6 月 5 日。

Firefox 13 可以在 Windows、Mac OS X、Linux 和 Android 上运行。

新特性：

  • 默认的主页能更快地访问书签、历史、设置等

  • 当打开一个新标签时，用户可以看到他们最常访问的网页

  • 默认情况下，启用 SPDY 协议，以便更快地浏览被支持的站点

  • 总计 72 个改进，包括页面检查器（Page Inspector）、HTML 面板、样式检查器（Style Inspector）、暂存器（Scratchpad）和样式编辑器（Style Editor）

  • 改进支持下列的 CSS 属性：column-fill、CSS3 background-position

  • 支持 :invalid 伪类

  • 现在支持 CSS3 <angle> 类型单位

Firefox 12

Firefox 12 发布于 2012 年 4 月 24 日。

Firefox 12 可以在 Windows、Mac OS X、Linux 和 Android 上运行。

新特性：

  • Windows：Firefox 通过一个小提示更容易进行更新（用户帐户控制）

  • 页面源代码显示行号

  • 在 title 属性中支持换行

  • 支持 text-align-last CSS 属性

Firefox 11

Firefox 11 发布于 2012 年 3 月 13 日。

Firefox 11 可以在 Windows、Mac OS X、Linux 和 Android 上运行。

新特性：

  • 样式编辑器（Style Editor） - 一个新的样式表编辑器。访问任意网页，然后从 Web Developer 菜单选择样式编辑器（Style Editor）

  • "倾斜的" 3D 页面结构视图 - 检查工具提供一个 "3D" 按钮

  • 支持 CSS text-size-adjust 属性（控制移动设备文本大小，并在放大到一个网页时显示滚动条）

  • 支持 outerHTML 属性

  • Firefox 可以从 Google Chrome 迁移进书签、历史和 cookies

  • 当查看源代码时，HTML5 标签可以正确地高亮显示

  • 文件可以存储在 IndexedDB 中

  • 移除 Websockets API 的 moz 前缀

Firefox 10

Firefox 10 发布于 2012 年 1 月 31 日。

Firefox 10 可以在 Windows、Mac OS X、Linux 和 Android 上运行。

新特性：

  • 页面检查器（Page Inspector）/CSS 检查器（CSS Inspector） - 让开发人员检查 HTML 和 CSS

  • 暂存器（Scratchpad） - 为 JavaScript 开发人员高亮显示语法的代码编辑器

  • 新的 3D 图形处理能力和 WebGL 内容的反走样

  • 全屏 API - 使开发人员能够创建全屏应用程序和游戏，传送全屏视频内容

  • 支持 CSS 3D 转换

Firefox 9

Firefox 9 发布于 2011 年 12 月 20 日。

Firefox 9 可以在 Windows、Mac OS X 和 Linux 上运行。

新特性：

  • 增加了类型推理（Type Inference），改进了 JavaScript 性能（比 Firefox 8 快了 30%）

  • 针对 Mac OS X Lion 改进的主题整合

  • 为 Mac OS X Lion 增加了两个手指滑动导航

  • 增加了通过 JavaScript 查询 "不跟踪" 状态的支持

  • 增加了对 CSS3 font-stretch 的支持

  • 改进了对 HTML5、MathML 和 CSS 的支持

Firefox 8

Firefox 8 发布于 2011 年 11 月 8 日。

Firefox 8 可以在 Windows、Mac OS X 和 Linux 上运行。

新特性：

  • 默认情况下安装 Twitter 搜索引擎

  • 默认情况下禁用第三方插件

  • 一个新的 "附加组件选择对话框"，允许在升级时验证插件

  • 标签可 "在需求时" 被加载，让它更快地存储带有多个标签的窗口

  • 支持跨域资源共享（CORS，Cross-Origin Resource Sharing），让开发者以一种安全的方式从其他域加载 WebGL 纹理

  • HTML5 上下文菜单支持

  • 用于 Android 的 Firefox：Mozilla 也添加了更多的功能，以便 Firefox 浏览器能运行在 Android 设备上

Firefox 7

Firefox 7 发布于 2011 年 9 月 27 日。

Firefox 7 可以在 Windows、Mac OS X 和 Linux 上运行。

新特性：

  • 改进的内存处理

  • 当使用 Firefox 同步时，书签和密码更改总是即时同步。

  • "http://" URL 前缀默认情况下是隐藏的（就像 Chrome 一样）

  • 把 WebSocket 协议从版本 7 更新到版本 8

  • 为用户添加一个系统来把性能数据发送回 Mozilla

Firefox 6

Firefox 6 发布于 2011 年 8 月 16 日。

Firefox 6 可以在 Windows、Mac OS X 和 Linux 上运行。

新特性：

  • 地址栏会高亮显示您所访问的网站的域

  • 流线型的站点标识块外观

  • 通过一个前缀的 API，增加了对 WebSockets 最新草案版本的支持。

  • 增加了对 EventSource / server-sent 事件的支持

  • 增加了对 window.matchMedia 的支持

  • 增加了 Scratchpad，一个交互式的 JavaScript 原型环境

  • 增加了一个新的 Web Developer 菜单项，移动相关开发项到其中

  • 提高 Web 控制台（Web Console）的可用性

  • 提高 Firefox 同步的发现能力

  • 当使用全景图（Panorama）时，减少浏览器的启动时间。

Firefox 5

Firefox 5 发布于 2011 年 6 月。

Firefox 5 可以在 Windows、Mac OS X 和 Linux 上运行。

新特性：

  • 添加 CSS 动画支持

  • 调谐 HTTP 空闲连接逻辑以提高性能

  • 改进的画布（canvas）、JavaScript、内存和网络性能

  • 改进支持 HTML5、XHR、MathML、SMIL 和画布（canvas）的标准。

  • 改进的拼写检查

  • 为 Linux 用户改进桌面环境的整合

  • WebGL 内容不再加载跨域的纹理（textures）

  • 背景标签限制了 setTimeout 和 setInterval 为 1000ms，以便提高性能

Firefox 4

Firefox 4 发布于 2011 年 3 月。

Firefox 4 可以在 Windows、Mac OS X 和 Linux 上运行。

新特性：

  • 支持超过 80 种语言！

  • 曾经最快的 Firefox - Firefox 比以前发布的版本的速度快了六倍。

  • 应用程序标签 - 一个永久的主页，显示经常访问的站点，比如 Web 邮件、Twitter、Pandora、Flickr。

  • 切换到标签 - 很容易地找到并切换到 Awesome Bar 上的任意打开的标签。

  • 展开图（Panorama） - 拖放标签到可管理组以便在导航多个打开的标签时节省时间。

  • Firefox 同步 - 跨多台计算机和移动设备访问您的 Awesome Bar 历史、书签、打开的标签、密码和数据。

  • 新的附加组件管理器 - 超过 200,000 个附加组件，可用于定制 Firefox 的特性、功能和外观。

  • 不跟踪 - 允许用户选择退出用于行为广告的跟踪。

  • 隐私第一 - 防止其他人访问您的浏览器的历史。

  • HTTP 严格的安全运输（HSTS，HTTP Strict Transport Security） - 建立安全连接来停止 "中间人" 的攻击，从而保护敏感数据的安全。

  • 内容安全策略（CSP，Content Security Policy） - 通过允许网站明确告诉浏览器哪些内容是合法的，来防止交叉脚本的攻击。

  • JIT 编译器 - 随着增强现有的 TraceMonkey JIT 和 SpiderMonkey 的解释器，获得更快的页面加载速度和更好的性能。

  • HTML5 支持 - 包括硬件加速、高清视频（WebM）、3D 图形、离线数据存储、专业排版、触摸屏界面和 Mozilla Audio API。

  • 改进了现有的工具 - 比如 CSS、画布（Canvas）和 SVG。

  • 不间断的浏览 - 在 Adobe Flash、Apple QuickTime 或 Microsoft Silverlight 插件崩溃时，不间断用户的浏览。

Firefox 3.6

Firefox 3.6 发布于 2011 年 1 月。

Firefox 3.6 是建立在 Mozilla 的 Gecko 1.9.2 网页渲染平台上，该平台自 2009 年初开始开发，为 Web 开发人员、插件开发者及用户包含了许多改进功能，这个版本也比以前的版本更快，更具响应性，且已经进行优化，可运行在小型设备操作系统上，比如 Maemo。

新特性：

  • 人物角色的主题 - 允许用户通过单击改变 Firefox 的外观

  • 防止安装过时的插件 - 当用户浏览网页时，保证用户安全

  • 打开本地视频可以全屏显示，支持公告框架

  • 改进的 JavaScript 性能

  • 为 Web 开发者提供异步运行脚本的能力 - 为了加快页面加载时间

  • 支持可下载的 Web 字体 - 使用新的 WOFF 字体格式

  • 改进对 CSS3、DOM 和 HTML5 的支持

更旧的 Firefox 版本

Firefox 3.5 - 发布于 2009 年 6 月。

Firefox 3.0 - 发布于 2008 年 6 月。

Firefox 2.0 - 发布于 2006 年 12 月。

Firefox 1.5 - 发布于 2005 年 11 月。

Firefox 1.0 - 发布于 2004 年 11 月。

Firefox 资源

Firefox 的支持站点

Firefox 的支持站点包括了可搜索知识库、下载中心、产品 FAQ 以及辅助支持目录。

ozilla Firefox 108现在可以下载了，这是2022年最后一个Firefox网络浏览器的主版本。在明天Firefox 108.0正式亮相之前，Firefox的安装文件刚刚在官网现身。Firefox 108对终端用户来说并不特别令人兴奋，但包含了一些开发者期待的新增功能。

Mozilla Firefox 108 的一些亮点包括：

- 导入地图特性现在默认启用，允许网页控制JavaScript导入的行为。

- Firefox现在可以正确处理使用ICCv4配置文件进行颜色校正的图像。

- Shift + Esc键盘快捷键现在可以打开进程管理器，以识别消耗太多资源的进程。

- 支持安全环境下的WebMIDI API。

- 支持CSS三角函数sin、cos、tan、asin、acos、atan和atan2，但目前是隐藏在一个偏好选项标记后面。

您现在就可以在官网FTP下载最新版本：

http://ftp.mozilla.org/pub/firefox/releases/108.0/


在线咨询
上一篇：深入浅出超好用的 CSS 阴影技巧
下一篇：HTML5常用的基础标签（一）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 印台区 岱岳区 卢湾区 普洱 三元区 石首市 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服