HTML 5 关于文件读取学习笔记
来源:互联网 发布:北京软件测试培训班 编辑:程序博客网 时间:2024/05/17 22:13
对象URL也被称为blob URL,指的是引用保存在File或Blob中数据的URL。使用对象URL的好处是,我们没有必要去调用File Reader就可以读取到对应的数据。为了创建对象URL,可以使用window.URL.createObjectURL()方法创建,并传入一个File或Bolb对象。其兼容的处理方案如下:
复制
- function createObjectURL(blob) {
- if(window.URL) {
- return window.URL.createObjectURL(blob);
- }else if(window.webkitURL) {
- return window.webkitURL.createObjectUrl(blob);
- }else {
- return null;
- }
- }
以下是一个示例,通过blob插入到img标签中:
HTML代码
复制
- <label for="imageList">请选择文件<input type="file" id="imageList" multiple name="image" accept="image/*" /></label>
- <p id="imageRemark">暂无内容</p>
JS 代码
复制
- window.addEventListener('load',function(){
- var imageList = document.getElementById('imageList'),
- imageRemark = document.getElementById('imageRemark');
- imageList.addEventListener('change',function(e){
- if(!this.files.length) return ;
- var url = null,
- i= 0,
- l=this.files.length,
- html = '';
- for(;i<l;i++){
- url = createObjectURL(this.files[i]);
- if(url) {
- html+= '<img src=\"' + url +'\"/>';
- }
- url = null;
- }
- imageRemark.innerHTML = html;
- },false);
- },false);
以上代码中,其实是直接读取图片文件放入到内存中,然后创建对象URL来形成内存中的引用。直接插入到img标签上,相比用FileReader来讲,效率确实高出很多。但由于文件读取是放在内存中,如果存在对图片的引用,那么图片占用的内存就不会被释放。要手动去清除内存的话,就可以直接把对象URL当作参数的形式传给window.URL.revokeObjectURL()
。由于不同浏览器带的前缀不同,所以就有了以下的兼容函数:
复制
- function revokeObject(url){
- if(window.URL) {
- window.URL.revokeObjectURL(url);
- } else if(window.webkitURL) {
- window.webkitURL.revokeObjectURL(url)
- }
- }
0 0
- HTML 5 关于文件读取学习笔记
- 关于http读取html文件的错误
- air 学习笔记:读取文件
- 关于Java读取xml文件的学习
- 关于Java读取xml文件的学习
- HTML 5 学习笔记
- HTML 5 学习笔记
- Html学习笔记5
- Android学习笔记:文件读取与ListView
- [LPTHW学习笔记] - ex15 + ex16 - 读取文件
- servlet学习笔记---读取资源文件
- 【黑马程序员】关于HTML的学习笔记
- 关于HTML+css 的一些学习笔记
- 20160110HTML学习笔记关于CSS
- java读取html文件
- 利用Servlet读取HTML表单数据-Servlet学习笔记
- Android学习笔记——读取文件流文件路径
- 【学习笔记】C#文件流联系|读取文件、追加Txt
- iOS绘制 - 自定义制作进度条
- Eclipse工具使用技巧总结
- 6.2.6 QMGR_JOB:针对特定邮件和MDA的发送任务
- 触摸事件
- SRoundLayout-逆时针圆形分布Layout
- HTML 5 关于文件读取学习笔记
- hibernate Entity注解
- oracle全文索引
- SPRING-MVC访问静态文件,如jpg,js,css
- 并查集初学——病毒
- 屏幕适配
- 然而沼跃鱼早已看穿了一切——字符串替换
- php获取系统信息
- 文本分类随笔