问题描述
假设我们在 HTML 里面有一个图片上传控件:
注意这个 accept="image/*" 非常重要,它指定了上传的是图片,在移动端的时候会关联到系统的弹窗选择类型等问题,务必加上。
然后,问题是,我们在没有提交这个表单到服务器之前,有没有办法把图片的内容读取出来呢?
看似简单,都是客户端的文件,应该是可以的,但在之前确实没什么好办法,但是自从有了HTML5,这个功能又回来了,通过FileReader可以轻松的实现这个功能。
例子说明问题
简要说明
简单来说整个操作设计如下几步:
1.通过 <file> 的 change 事件触发事件,并且获取 event 对象;
2.通过 event 对象获取上传的文件的 js 对象 file ;
3.通过 window.URL 工具从 file 对象生成一个可用的 URL;
4.把这个 URL 置入使用;
5.*释放这个 URL 的伺服
关键点:
1.对于同一个 file ,每次调用 URL.createObjectURL 的时候,都会重新生成一个不同的 URL;
2.调用 URL.createObjectURL 的时候,浏览器自动在内存中开辟空间,用于伺服这个 URL,也就是使得这个 URL 可以请求成功;
3.如果调用了 URL.revokeObjectURL(imgURL); 之后,这个伺服就会关掉,再请求这个 URL 就会 404;
4.这一切都是客户端的事情,服务器端对此一无所知,包括你选择的这个图;
5.这个 imgURL 大概是这个样子:blob:http%3A//localhost%3A8000/22cc97d5-5e46-4d87-9df4-c3e8c0aa72bb
Docker的总架构图 docker是一个C/S模式的架构,后端是一个松耦合架构,模块各司...
前提:后台返回是绘制医用心电波形报告的数据,前端通过canvas在网页上绘制再进...
Dreamweaver中想要插入验证标签,该怎么操作呢?下面我们就来看看详细的教程。 ...
滑动窗口算法是较为入门题目的算法,一般是一些有规律数组问题的最优解,也就是...
基本上快被这个问题搞疯了,症状如下 症状描述:在ie下(6或7,8没有试过)当出...
前面的文章算是把Bootstrap CSS部分简单的学习了一遍,应该忽视了比较多的细节问...
shell脚本是帮助程序员和系统管理员完成费时费力的枯燥工作的利器,是与计算机交...
TOP云 (west.cn)6月16日消息,近日一个组合 域名 NETCO.COM在国外平台以10,200...
手游生力军里,创业团队拥有无限的热情和天马行空的想象力,给行业带来一个又一...
对实现动画的前端同学们来说, canvas 可以说是最自由,最能全面控制的一个动画...