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新增标签有哪些？HTML5中新增的13种标签的简单介绍

HTML5文本格式化

值得一个的5个强大的HTML5api 函数

h5移动端各种各样的列表的制作方法详解(四)

用HTML5绘制折线图的实例代码

如何使用css更改占位符颜色？（代码示例）

HTML5手机开发-滚动和惯性缓动的代码实例

怎样用h5计算手机摇动次数