手机端html图片预览效果,用html5文件api实现移动端图片上传&预览效果

想要用h5在移动端实现图片上传&预览效果，首先要了解html5的文件api相关知识(全部api只列举本功能所需):html

1.Blob对象html5

Blob表示原始二进制数据,Html5的file对象就继承于它，它提供如下属性：api

type：mime类型,若是是未知类型则返回一个空字符串浏览器

size：Blob对象的字节长度app

2.input(type=“file”)控件与file&FileList对象iphone

见上述代码：异步

multiple：表示file控件容许一次放置多个文件测试

accept：用来让input只能接受某种类型的文件，可是目前主流浏览器对其的支持都只局限于打开文件选择窗口时，默认选择图片文件而已，若是其余类型文件，file控件也能正常接受。因此要单独加判断：this

input file控件有以下两个属性：spa

name:文件名，不包含路径(悲催的是iphone返回的文件名都是image.***)

lastModifiedDate:文件的最后修改日期

file：控件内用户选择的每个文件都是一个file对象

FileList:为file对象的列表，访问方法以下：

var files = document.getElementById("file").files

判断代码以下：

for(var k=0;k

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.本功能核心代码以下：

if(typeofFileReader==undefined&&newFileReader().readAsDataURL) {

alert("不支持filereader");

}else{varimg=document.createElement("img");

document.body.appendChild(img);varreader= newFileReader();

input=document.getElementById("file");varοnchange= function(){varfiles=input.files;for(vark=0;k

console.log(files[k].name+"不是图像文件!");

}else{//此处可加入文件上传的代码

console.log(files[k].name+"文件已上传")

}

}

reader.readAsDataURL(files[0]);

reader.οnlοad= function(){

img.src= this.result;

}

}

input.οnchange=onchange;

}

很简单的感受吧^_^

5.手机浏览器能力测试结果：

用手边的作了下功能支持的能力测试，结果以下，仍是很乐观的哦～