用html5文件api实现移动端图片上传&预览效果
2016-03-22 19:33
991 查看
想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需):
1.Blob对象
Blob表示原始二进制数据,Html5的file对象就继承于它,它提供以下属性:
type:mime类型,如果是未知类型则返回一个空字符串
size:Blob对象的字节长度
2.input(type=“file”)控件与file&FileList对象
见上述代码:
multiple:表示file控件允许一次放置多个文件
accept:用来让input只能接受某种类型的文件,但是目前主流浏览器对其的支持都只局限于打开文件选择窗口时,默认选择图片文件而已,如果其他类型文件,file控件也能正常接受。所以要单独加判断:
input file控件有如下两个属性:
name:文件名,不包含路径(悲催的是iphone返回的文件名都是image.***)
lastModifiedDate:文件的最后修改日期
file:控件内用户选择的每一个文件都是一个file对象
FileList:为file对象的列表,访问方法如下:
判断代码如下:
3.FileReader接口
Filereader接口主要用于把文件读入内存,并且读取文件中的数据,FileReader接口提供了一个异步接口(用于在浏览器主线程中异步访问文件系统),浏览器对FileReader的能力检测代码如下:
FileReader的方法
readAsDataURL:将文件读取为DataURL(base64最为常见)
FileReader的状态
onabort 数据读取中断
onerror 数据读取出错
onloadstart 开始读取数据
onprogress 读取中
onload 读取成功时触发
onloadend 数据读取完成,无论成功失败都触发
在各种方法中,this.result指向读取的文件数据
4.本功能核心代码如下:
很简单的感觉吧^_^
5.手机浏览器能力测试结果:
用手边的做了下功能支持的能力测试,结果如下,还是很乐观的哦~
1.Blob对象
Blob表示原始二进制数据,Html5的file对象就继承于它,它提供以下属性:
type:mime类型,如果是未知类型则返回一个空字符串
size:Blob对象的字节长度
2.input(type=“file”)控件与file&FileList对象
<input type="file" accept="image/*” multiple id=“file"/>
见上述代码:
multiple:表示file控件允许一次放置多个文件
accept:用来让input只能接受某种类型的文件,但是目前主流浏览器对其的支持都只局限于打开文件选择窗口时,默认选择图片文件而已,如果其他类型文件,file控件也能正常接受。所以要单独加判断:
input file控件有如下两个属性:
name:文件名,不包含路径(悲催的是iphone返回的文件名都是image.***)
lastModifiedDate:文件的最后修改日期
file:控件内用户选择的每一个文件都是一个file对象
FileList:为file对象的列表,访问方法如下:
var files = document.getElementById("file").files
判断代码如下:
for(var k=0;k<files.length;k++){ if(!/image\/\w+/.test(files[k].type)){ alert(files[k].name+"不是图像文件!"); }else{ //此处可加入文件上传的代码 alert(files[k].name+"文件已上传”) } }
3.FileReader接口
Filereader接口主要用于把文件读入内存,并且读取文件中的数据,FileReader接口提供了一个异步接口(用于在浏览器主线程中异步访问文件系统),浏览器对FileReader的能力检测代码如下:
if(typeof FileReader == undefined) { div.innerHTML = "不支持filereader"; }else{ div.innerHTML = "FileReader is ok”; }
FileReader的方法
readAsDataURL:将文件读取为DataURL(base64最为常见)
FileReader的状态
onabort 数据读取中断
onerror 数据读取出错
onloadstart 开始读取数据
onprogress 读取中
onload 读取成功时触发
onloadend 数据读取完成,无论成功失败都触发
在各种方法中,this.result指向读取的文件数据
4.本功能核心代码如下:
<input type="file" accept="image/*" ref="file" onChange={ctr.onchange} multiple/> <script> if(typeof FileReader == undefined&&new FileReader().readAsDataURL) { alert("不支持filereader"); }else{ var img = document.createElement("img"); document.body.appendChild(img); var reader = new FileReader(); input = document.getElementById("file"); var onchange = function(){ var files = input.files; for(var k=0;k<files.length;k++){ if(!/image\/\w+/.test(files[k].type)){ console.log(files[k].name+"不是图像文件!"); }else{ //此处可加入文件上传的代码 console.log(files[k].name+"文件已上传") } } reader.readAsDataURL(files[0]); reader.onload = function(){ img.src = this.result; } } input.onchange = onchange; } </script>
很简单的感觉吧^_^
5.手机浏览器能力测试结果:
用手边的做了下功能支持的能力测试,结果如下,还是很乐观的哦~
相关文章推荐
- Android中打招呼
- iOSDay12之OC属性和点语法
- android 通过工具抓包
- iOS runtime学习之Method Swizzling(方法调配技术)
- Unity3D -- 获取不重复的随机数
- Android Studio Application Test详解
- android线程消息传递机制——Looper,Handler,Message
- Android中进程(Process)和线程(Thread)
- Android Studio 遇到 “method ID not in [0, 0xffff]: 65536” error
- java环境的搭建及Android SDK环境搭建的路径
- 关于iOS学习笔记(1)
- android实现从一个activity跳转到另一个activity中
- Android studio怎样隐藏标题栏
- mybatis 的mapping报XML Parsing Error
- Cocos2dx.3x入门三部曲-Hello Game项目解析(三)
- Android studio 开发快捷键使用(新手)
- iOS 极光推送快速最新集成(2.1.0)
- Android新手入门2016(12)--基于Layout文件的AlertDialog
- Android官方开发文档Training系列课程中文版:添加ActionBar之添加Action按钮
- IOS开发ARC forbids explicit message send of 'autorelease'错误解决办法