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可以轻松的实现这个功能。
例子说明问题

复制代码

代码如下:

阅读剩余部分

相关阅读 >>

h5前端开发是什么

HTML5新增的表单控件和表单属性有哪些

HTML5中postmessage api的基本使用

HTML5 高级教程--拖放 api 实现拖放排序

详解HTML5 postmessage解决跨域通信的问题

用h5的canvas做恐怖动画

html中序列化标签的简单介绍（代码实例）

10个HTML5代码片段可在网站制作中随时可用详解