HTML5实现预览本地图片-木庄网络博客

2022-03-06 21:32:16 PHP中文网 JavaScript 百度已收录

本文摘自PHP中文网，作者不言，侵删。

这篇文章主要介绍了HTML5实现预览本地图片的相关资料,需要的朋友可以参考下

问题描述
假设我们在 HTML 里面有一个图片上传控件：

复制代码

代码如下:

1	`<input` `id="upload_image"` `type="file"` `name="image"` `accept="image/*"` `/>`

注意这个 accept="image/*" 非常重要，它指定了上传的是图片，在移动端的时候会关联到系统的弹窗选择类型等问题，务必加上。
然后，问题是，我们在没有提交这个表单到服务器之前，有没有办法把图片的内容读取出来呢？
看似简单，都是客户端的文件，应该是可以的，但在之前确实没什么好办法，但是自从有了HTML5，这个功能又回来了，通过FileReader可以轻松的实现这个功能。
例子说明问题

复制代码

代码如下:

阅读剩余部分

相关阅读 >>

详解HTML5里autofocus自动聚焦属性的使用

HTML5初窥之简介

微信HTML5页面如何调用第三方位置导航

使用HTML5可以干什么？HTML5的优势和劣势（总结）

html中的title是什么意思？

HTML5边玩边学（十）-俄罗斯方块之控制界面篇（源码）

HTML5拖拉上传文件的示例代码分享

HTML5动画中关于等待加载动画的实例分享