HTML5 File API — 让前端操作文件变的可能

前言

在 HTML5 File API 出现之前，前端对于文件的操作是非常有局限性的，大多需要配合后端实现。出于安全角度考虑，从本地上传文件时，代码不可能获取文件在用户本地的地址，所以纯前端不可能完成一些类似图片预览的功能。但是 File API 的出现，让这一切变成了可能。

跟着楼主由浅入深，了解下强大的 File API 吧。

FileList

FileList 对象针对表单的 file 控件。当用户通过 file 控件选取文件后，这个控件的 files 属性值就是 FileList 对象。它在结构上类似于数组，包含用户选取的多个文件。如果 file 控件没有设置 multiple 属性，那么用户只能选择一个文件，FileList 对象也就只有一个元素了。

<input type=‘file‘ multiple/>
<script>document.querySelector(‘input‘).onchange=function() {console.log(this.files);};</script>

比如我选择了两个文件，控制台打印：

FileList {0: File, 1: File, length: 2}
0: File
1: File
  length:2
__proto__: Object

除了用 file 控件，采用拖放方式，也可以得到 FileList 对象。关于拖放，可以参考下我以前写的文章 HTML5 — 让拖放变的流行起来。

<textarea></textarea>
<script>var ipt =document.querySelector(‘textarea‘);ipt.ondragover=function () {returnfalse;};// Add drop handleript.ondrop=function(e) {e.stopPropagation();e.preventDefault();
    e = e ||window.event;var files =e.dataTransfer.files;console.log(files);};</script>

选中两个文件拖放到文本框中，打印结果和上面一致。

一般来说，我们不可能手动构造 FileList 对象，只能被动地读取，也就是说只有用户主动触发了文件读取行为，js 才能访问到 FileList，而这通常发生在表单选择文件或者拖拽文件中。

File

我们看到一个 FileList 对象包含了我们选中的 File 对象，那么一个 File 又有哪些属性呢？我们可以打印出来看看。

  • name：文件名，该属性只读。
  • size：文件大小，单位为字节，该属性只读。
  • type：文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读。
  • lastModified：文件的上次修改时间，格式为时间戳。
  • lastModifiedDate：文件的上次修改时间，格式为 Date 对象实例。

Blob

上图中我们看到，File 对象是继承自 Blob 对象的，Blob 又是什么鬼？

Blob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的 API（比如 File 对象），都是建立在 Blob 对象基础上的，继承了它的属性和方法。

生成 Blob 对象有两种方法：一种是使用 Blob 构造函数，另一种是对现有的 Blob 对象使用 slice 方法切出一部分。

（1）Blob 构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，第二个参数是数据的类型，这两个参数都不是必需的。

var a = ["hello", "world"];
var myBlob = new Blob(a, { "type" : "text/xml" });
console.log(myBlob);

（2）Blob 对象的 slice 方法，将二进制数据按照字节分块，返回一个新的 Blob 对象。

var a = ["hello", "world"];
var myBlob = new Blob(a, { "type" : "text/xml" });
var newBlob = myBlob.slice(0, 5);
console.log(newBlob);

Blob 对象有两个只读属性：

  • size：二进制数据的大小，单位为字节。（文件上传时可以在前端判断文件大小是否合适）
  • type：二进制数据的 MIME 类型，全部为小写，如果类型未知，则该值为空字符串。（文件上传时可以在前端判断文件类型是否合适）

FileReader

重头戏来了，FileReader API 才是我们接下去完成一些任务的关键。FileReader API 用于读取文件，即把文件内容读入内存。它的参数是 File 对象或 Blob 对象。

对于不同类型的文件，FileReader 提供不同的方法读取文件。

  • readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个 0 到 255 之间的整数。（已废弃）
  • readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是 UTF-8，可以通过可选的格式参数，指定其他编码格式的文本。
  • readAsDataURL(Blob|File)：返回一个基于 Base64 编码的 data-uri 对象。
  • readAsArrayBuffer(Blob|File)：返回一个 ArrayBuffer 对象。

除了以上四种不同的读取文件方法，FileReader API 还有一个 abort 方法，用于中止文件上传。

var reader = new FileReader();
reader.abort();

FileReader 对象采用异步方式读取文件，可以为一系列事件指定回调函数。

  • onabort 方法：读取中断或调用 reader.abort() 方法时触发。
  • onerror 方法：读取出错时触发。
  • onload 方法：读取成功后触发。
  • onloadend 方法：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。
  • onloadstart 方法：读取将要开始时触发。
  • onprogress 方法：读取过程中周期性触发。（可以用来获取文件读取的进度）

以前在学习图片的 base64 编码的时候，写了一篇文章 获取图片 base64 编码的几种方法，当时还没有学习 File API，了解到 File API 也能做类似的事情，现在学到了，写了个简单的 demohttp://hanzichi.github.io/2016/image2base64/，不仅能获取图片的 base64 编码，同时也能获取文字的 base64 编码，代码比较简单就不放了，可以 猛戳这里。

获取到了文件的 base64 编码，做一些诸如图片预览的功能，也就手到擒来了，有兴趣的可以自己尝试下，类似的还有文字预览啊，等等。

URL

你以为 File API 就这样了吗？非也，还有个强大的东西没有介绍，URL 对象！

调用 URL 对象的 createObjectURL 方法，传入一个 File 对象或者 Blob 对象，能生成一个链接，听起来好像很吊的样子。

var objecturl =  window.URL.createObjectURL(blob);

上面的代码会对二进制数据生成一个 URL，这个 URL 可以放置于任何通常可以放置 URL 的地方，比如 img 标签的 src 属性。需要注意的是，即使是同样的二进制数据，每调用一次 URL.createObjectURL 方法，就会得到一个不一样的 URL。

这个 URL 的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个 URL 就失效。（File 和 Blob 又何尝不是这样呢）除此之外，也可以手动调用 URL.revokeObjectURL 方法，使 URL 失效。

window.URL.revokeObjectURL(objectURL);

举个简单的例子。

var blob = new Blob(["Hello hanzichi"]);
var a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "a.txt";
a.textContent = "Download";

document.body.appendChild(a);

页面上生成了一个超链接，点击它就能下载一个名为 a.txt 的文件，里面的内容是 Hello hanzichi。

这里插点题外话，简单介绍下 H5 新增的 download 属性。对于一些诸如 exe，rar 等浏览器不能直接打开的文件类型，我们一般可以直接用一个 a 标签，将其指向文件在服务端的地址，点击即可下载。但是如果是一些浏览器能直接打开的文件，比如 txt，js 等，如果这样设置一个超链接，点击会直接打开文件，一般我们可以配合后端实现，比如用 PHP。

$file_name = "1.txt"; // 下载文件名
$file_dir = dirname(__FILE__). ‘/‘; //下载文件存放目录
//输入文件标签
Header("Content-type: text/plain");
Header("Content-Disposition: attachment; filename=" . $file_name );

以上代码需要文件的 Content-type 属性值，安利一个网址，http://tool.oschina.net/commons ，各种文件类型的 Content-type 属性值一网打尽！

如果考虑到安全性，header + fread 可能会显得更严谨。

$file_name = "1.txt"; // 下载文件名
$file_dir = dirname(__FILE__). ‘/‘; //下载文件存放目录

Header("Content-type: text/plain");
Header("Content-Disposition: attachment; filename=" . $file_name );
echo fread($file, filesize($file_dir . $file_name));

但是现在我们只需要在 a 标签上加上 download ！

<a href="1.txt" download>download txt></a>

还可以给 download 加上属性值，即为下载的文件名。

<a href="1.txt" download="2.txt">download txt></a>

可以省略 .txt 的后缀名，浏览器会自行判断。

我们再回到 URL 上来。对于 File 或者 Blob 对象，我们可以这样理解，它们的存在，依赖于页面，而 URL 能给这些 "转瞬即逝" 的二进制对象一个临时的指向地址。

这个临时的地址还有什么用呢？也能做图片预览，相比前面用 readAsDataURL 的实现，更简单了。

<input type=‘file‘ multiple/><br/>
<img/>
<script>document.querySelector("input").onchange=function() {var files =this.files;document.querySelector("img").src=window.URL.createObjectURL(files[0]);}</script>

比如还有这样的需求，前端上传文件，要动态生成该文件的下载链接，也能用 URL 完成。

Canvas & dataURL & Blob

canvas 中有 toDataURL 函数，可以将 canvas 转为 dataURL 形式的 base64 编码，而 Blob 也可以转为 dataURL，这三者之间是否可以互相转换？有没有什么实用之处？

（1）canvas -> dataURL

用 toDataURL 方法，比较简单，不多说。

（2）blob -> dataURL

用 FileReader 的 readAsDataURL 方法，使用方式可以看 这个 demo

（3）dataURL -> blob

这个函数有点屌

functiondataURLtoBlob(dataurl) {
  var arr = dataurl.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
}

（4）dataURL - canvas

将 image 的 src 属性置为 dataURL，再用 drawImage 方法画上去。

（5）blob - canvas

如何把二进制形式的图片画上 canvas？先用 readAsDataURL 转为 dataURL，接着就是 （4） 的事情了。

（6）canvas - blob

canvas 转为 blob 也可以用 dataURL 做跳板，先将 canvas 转为 dataURL（1），再用 dataURL 转为 blob（3）。

利用它们之间的转换可以做些什么好玩的事呢？比如可以上传图片，对图片做各种处理，然后保存，看起来好像挺好玩的，等有空了搞个 demo 出来。

前言

在 HTML5 File API 出现之前，前端对于文件的操作是非常有局限性的，大多需要配合后端实现。出于安全角度考虑，从本地上传文件时，代码不可能获取文件在用户本地的地址，所以纯前端不可能完成一些类似图片预览的功能。但是 File API 的出现，让这一切变成了可能。

跟着楼主由浅入深，了解下强大的 File API 吧。

FileList

FileList 对象针对表单的 file 控件。当用户通过 file 控件选取文件后，这个控件的 files 属性值就是 FileList 对象。它在结构上类似于数组，包含用户选取的多个文件。如果 file 控件没有设置 multiple 属性，那么用户只能选择一个文件，FileList 对象也就只有一个元素了。

<input type=‘file‘ multiple/>
<script>document.querySelector(‘input‘).onchange=function() {console.log(this.files);};</script>

比如我选择了两个文件，控制台打印：

FileList {0: File, 1: File, length: 2}
0: File
1: File
  length:2
__proto__: Object

除了用 file 控件，采用拖放方式，也可以得到 FileList 对象。关于拖放，可以参考下我以前写的文章 HTML5 — 让拖放变的流行起来。

<textarea></textarea>
<script>var ipt =document.querySelector(‘textarea‘);ipt.ondragover=function () {returnfalse;};// Add drop handleript.ondrop=function(e) {e.stopPropagation();e.preventDefault();
    e = e ||window.event;var files =e.dataTransfer.files;console.log(files);};</script>

选中两个文件拖放到文本框中，打印结果和上面一致。

一般来说，我们不可能手动构造 FileList 对象，只能被动地读取，也就是说只有用户主动触发了文件读取行为，js 才能访问到 FileList，而这通常发生在表单选择文件或者拖拽文件中。

File

我们看到一个 FileList 对象包含了我们选中的 File 对象，那么一个 File 又有哪些属性呢？我们可以打印出来看看。

  • name：文件名，该属性只读。
  • size：文件大小，单位为字节，该属性只读。
  • type：文件的 MIME 类型，如果分辨不出类型，则为空字符串，该属性只读。
  • lastModified：文件的上次修改时间，格式为时间戳。
  • lastModifiedDate：文件的上次修改时间，格式为 Date 对象实例。

Blob

上图中我们看到，File 对象是继承自 Blob 对象的，Blob 又是什么鬼？

Blob（Binary Large Object）对象代表了一段二进制数据，提供了一系列操作接口。其他操作二进制数据的 API（比如 File 对象），都是建立在 Blob 对象基础上的，继承了它的属性和方法。

生成 Blob 对象有两种方法：一种是使用 Blob 构造函数，另一种是对现有的 Blob 对象使用 slice 方法切出一部分。

（1）Blob 构造函数，接受两个参数。第一个参数是一个包含实际数据的数组，第二个参数是数据的类型，这两个参数都不是必需的。

var a = ["hello", "world"];
var myBlob = new Blob(a, { "type" : "text/xml" });
console.log(myBlob);

（2）Blob 对象的 slice 方法，将二进制数据按照字节分块，返回一个新的 Blob 对象。

var a = ["hello", "world"];
var myBlob = new Blob(a, { "type" : "text/xml" });
var newBlob = myBlob.slice(0, 5);
console.log(newBlob);

Blob 对象有两个只读属性：

  • size：二进制数据的大小，单位为字节。（文件上传时可以在前端判断文件大小是否合适）
  • type：二进制数据的 MIME 类型，全部为小写，如果类型未知，则该值为空字符串。（文件上传时可以在前端判断文件类型是否合适）

FileReader

重头戏来了，FileReader API 才是我们接下去完成一些任务的关键。FileReader API 用于读取文件，即把文件内容读入内存。它的参数是 File 对象或 Blob 对象。

对于不同类型的文件，FileReader 提供不同的方法读取文件。

  • readAsBinaryString(Blob|File)：返回二进制字符串，该字符串每个字节包含一个 0 到 255 之间的整数。（已废弃）
  • readAsText(Blob|File, opt_encoding)：返回文本字符串。默认情况下，文本编码格式是 UTF-8，可以通过可选的格式参数，指定其他编码格式的文本。
  • readAsDataURL(Blob|File)：返回一个基于 Base64 编码的 data-uri 对象。
  • readAsArrayBuffer(Blob|File)：返回一个 ArrayBuffer 对象。

除了以上四种不同的读取文件方法，FileReader API 还有一个 abort 方法，用于中止文件上传。

var reader = new FileReader();
reader.abort();

FileReader 对象采用异步方式读取文件，可以为一系列事件指定回调函数。

  • onabort 方法：读取中断或调用 reader.abort() 方法时触发。
  • onerror 方法：读取出错时触发。
  • onload 方法：读取成功后触发。
  • onloadend 方法：读取完成后触发，不管是否成功。触发顺序排在 onload 或 onerror 后面。
  • onloadstart 方法：读取将要开始时触发。
  • onprogress 方法：读取过程中周期性触发。（可以用来获取文件读取的进度）

以前在学习图片的 base64 编码的时候，写了一篇文章 获取图片 base64 编码的几种方法，当时还没有学习 File API，了解到 File API 也能做类似的事情，现在学到了，写了个简单的 demohttp://hanzichi.github.io/2016/image2base64/，不仅能获取图片的 base64 编码，同时也能获取文字的 base64 编码，代码比较简单就不放了，可以 猛戳这里。

获取到了文件的 base64 编码，做一些诸如图片预览的功能，也就手到擒来了，有兴趣的可以自己尝试下，类似的还有文字预览啊，等等。

URL

你以为 File API 就这样了吗？非也，还有个强大的东西没有介绍，URL 对象！

调用 URL 对象的 createObjectURL 方法，传入一个 File 对象或者 Blob 对象，能生成一个链接，听起来好像很吊的样子。

var objecturl =  window.URL.createObjectURL(blob);

上面的代码会对二进制数据生成一个 URL，这个 URL 可以放置于任何通常可以放置 URL 的地方，比如 img 标签的 src 属性。需要注意的是，即使是同样的二进制数据，每调用一次 URL.createObjectURL 方法，就会得到一个不一样的 URL。

这个 URL 的存在时间，等同于网页的存在时间，一旦网页刷新或卸载，这个 URL 就失效。（File 和 Blob 又何尝不是这样呢）除此之外，也可以手动调用 URL.revokeObjectURL 方法，使 URL 失效。

window.URL.revokeObjectURL(objectURL);

举个简单的例子。

var blob = new Blob(["Hello hanzichi"]);
var a = document.createElement("a");
a.href = window.URL.createObjectURL(blob);
a.download = "a.txt";
a.textContent = "Download";

document.body.appendChild(a);

页面上生成了一个超链接，点击它就能下载一个名为 a.txt 的文件，里面的内容是 Hello hanzichi。

这里插点题外话，简单介绍下 H5 新增的 download 属性。对于一些诸如 exe，rar 等浏览器不能直接打开的文件类型，我们一般可以直接用一个 a 标签，将其指向文件在服务端的地址，点击即可下载。但是如果是一些浏览器能直接打开的文件，比如 txt，js 等，如果这样设置一个超链接，点击会直接打开文件，一般我们可以配合后端实现，比如用 PHP。

$file_name = "1.txt"; // 下载文件名
$file_dir = dirname(__FILE__). ‘/‘; //下载文件存放目录
//输入文件标签
Header("Content-type: text/plain");
Header("Content-Disposition: attachment; filename=" . $file_name );

以上代码需要文件的 Content-type 属性值，安利一个网址，http://tool.oschina.net/commons ，各种文件类型的 Content-type 属性值一网打尽！

如果考虑到安全性，header + fread 可能会显得更严谨。

$file_name = "1.txt"; // 下载文件名
$file_dir = dirname(__FILE__). ‘/‘; //下载文件存放目录

Header("Content-type: text/plain");
Header("Content-Disposition: attachment; filename=" . $file_name );
echo fread($file, filesize($file_dir . $file_name));

但是现在我们只需要在 a 标签上加上 download ！

<a href="1.txt" download>download txt></a>

还可以给 download 加上属性值，即为下载的文件名。

<a href="1.txt" download="2.txt">download txt></a>

可以省略 .txt 的后缀名，浏览器会自行判断。

我们再回到 URL 上来。对于 File 或者 Blob 对象，我们可以这样理解，它们的存在，依赖于页面，而 URL 能给这些 "转瞬即逝" 的二进制对象一个临时的指向地址。

这个临时的地址还有什么用呢？也能做图片预览，相比前面用 readAsDataURL 的实现，更简单了。

<input type=‘file‘ multiple/><br/>
<img/>
<script>document.querySelector("input").onchange=function() {var files =this.files;document.querySelector("img").src=window.URL.createObjectURL(files[0]);}</script>

比如还有这样的需求，前端上传文件，要动态生成该文件的下载链接，也能用 URL 完成。

Canvas & dataURL & Blob

canvas 中有 toDataURL 函数，可以将 canvas 转为 dataURL 形式的 base64 编码，而 Blob 也可以转为 dataURL，这三者之间是否可以互相转换？有没有什么实用之处？

（1）canvas -> dataURL

用 toDataURL 方法，比较简单，不多说。

（2）blob -> dataURL

用 FileReader 的 readAsDataURL 方法，使用方式可以看 这个 demo

（3）dataURL -> blob

这个函数有点屌

functiondataURLtoBlob(dataurl) {
  var arr = dataurl.split(‘,‘), mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type:mime});
}

（4）dataURL - canvas

将 image 的 src 属性置为 dataURL，再用 drawImage 方法画上去。

（5）blob - canvas

如何把二进制形式的图片画上 canvas？先用 readAsDataURL 转为 dataURL，接着就是 （4） 的事情了。

（6）canvas - blob

canvas 转为 blob 也可以用 dataURL 做跳板，先将 canvas 转为 dataURL（1），再用 dataURL 转为 blob（3）。

利用它们之间的转换可以做些什么好玩的事呢？比如可以上传图片，对图片做各种处理，然后保存，看起来好像挺好玩的，等有空了搞个 demo 出来。

时间： 2024-08-10 21:10:48

HTML5 File API — 让前端操作文件变的可能的相关文章

HTML5 file API加canvas实现图片前端JS压缩并上传 （转载）

一.图片上传前端压缩的现实意义 对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验. 这种体验包括两方面: 由于上传图片尺寸比较小,因此上传速度会比较快,交互会更加流畅,同时大大降低了网络异常导致上传失败风险. 最最重要的体验改进点:省略了图片的再加工成本.很多网站的图片上传功能都会对图片的大小进行限制,尤其是头像上传,限制5M或者2M以内是非常常见的.然后现在的数码设备拍摄功能都非常出众,一张原始图片超过2M几乎是标配,此时如果用户想把手机或相机中的某个得意图片

HTML5 File API初探 支持文件拖放上传功能

新一代Web开发标准HTML 5可以带来远远超出其本身作为一种标记语言的能力,除我们之前介绍的HTML 5可完美支持视频音频元素外,还提供一些强大的脚本工具,负责监督HTML5发展进程的W3C组织,刚刚出版了一份有关文档操作API的规格草案,HTML5 File API 接口功能. 该HTML5 File API的设计初衷,是改善基于浏览器的Web应用程序处理文件上传的方式,使文件直接拖放上传成为可能.草案定义了新的输入选项 ﹤input type=”file”﹥ 来处理文件上传. 更为惊喜的是

HTML5 file api读取文件的MD5码工具

1.工具的用途:用HTML5 file api读取文件的MD5码.MD5码在文件的唯一性识别上有很重要的应用,业内常用MD5进行文件识别.文件秒传.文件安全性检查等: 2.适用性:IE.Chrome皆兼容: 3.缺陷:当上传大文件时,需要较长的时间才能扫描出MD5码: 4.关于引用:其中引用了js文件(spark-md5.js) <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

通过 File API 使用 JavaScript 读取文件

原文地址:http://www.html5rocks.com/zh/tutorials/file/dndfiles/ 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式.为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用.另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小. 该规范通过“本地”文件系统提供了多种文件访

HTML5 File API — 拖拽显示

1.HTML5拖拽 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放. 如果是html中的元素,要进行拖动,需要设置draggable为true. 下面的代码显示了img在两个div里任意拖动. 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style type="text/css"> 5 #div1, #div2 6 {float:left; width:100px; height:35px;

HTML5 File API解读

1,概述 Web应用应该具备处理广泛用户输入问题的能力,例如在Web富应用中,用户希望上传文件到服务器.File API定义了访问文件的基本操作途径,包括文件.文件列表集.错误处理等,同时,File API还定义了描述文件异步处理进程中的一些元数据.接下来,我们一起看看File的应用. 2,FileList接口 接口描述: 1 interface FileList { 2 getter File? item(unsigned long index); 3 readonly attribute u

javascript 使用Html5 File Api进行文件读取

javascript 使用Html File Api进行文件读取,注意"读取"是只读不写,不可以主动获取浏览器所在主机的文件列表. Html5 中 FileApi主要有 FileUpload, File,FileList,FileError,Blob,FileReader,DataTransfer. 这里主要测试File.因此有必要给一个 test target <form action="javascript:void(0)" method="po

使用File API 之FileReader 实现文件上传

对于基于浏览器的应用而言,访问本地文件都是一件头疼的事情,通常我们能做的仅仅是使用<input type="file">标签来上传文件.实现过程是:选取文件的时候value 属性保存了用户指定的文件的名称,表单被提交的时候,浏览器会向服务器发送选中的文件的内容而不仅仅是发送文件名.再获取服务器返回的地址,然后做预览. 但是如果有一天我们要上传一个图片,传了图片后预览想换另一张图片,就又得先上传到服务器再预览.在网络比较慢的情况下,这样真的很折腾. 所以我们某些时候需要先预览

HTML5 File API +JavaSevlet 实现文件上传实时更新进度

1. [代码]java1.8+Tomcat8.0 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 7