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

 

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.手机浏览器能力测试结果:

用手边的做了下功能支持的能力测试,结果如下,还是很乐观的哦~

嵌套h5 ios上传文件无法选择文件的问题 h5实现文件上传_控件