H5上传图片

一、HTML

备注：默认的样式看起来很糟糕，设置opacity=0，然后再加上设计样式；（具体可参考百度图片搜索）

1、input使用type=file进行文件选择；
2、capture="camera"表示可以捕获到系统默认的照相机；
3、multiple表示可以进行多选；
4、accept="image/*"表示匹配的文件类型；accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"可以看得更清晰；

二、文件信息

window.handleFiles = function (element) {
    if (!element.files[0]) {
        return;
    }
    for (var prop in element.files[0]) {
            console.log('file info '+prop+':'+element.files[0][prop]);
    }
}；

直接从File对象可以获取名称、修改时间、类型、大小等信息。

三、图片内容

1、FileReader.readAsDataURL
读取图片内容可以使用FileReader的readAsDataURL接口

var reader = new FileReader();
reader.onload = function (theFile) {
    document.getElementById('img-display').setAttribute('src', theFile.target.result);
// 读取到的theFile.target.result是base64数据
};
reader.readAsDataURL(element.files[0]);

FileReader的接口参数为File对象或Blob对象，用于读取文件内容。
主要的接口：
readAsBinaryString(Blob|File) ：读取结果为二进制字符串，每个字节包含一个0到255之间的整数。
readAsText(Blob|File, opt_encoding) ：读取结果是一个文本字符串。
readAsDataURL(Blob|File) ： 读取结果是一个基于Base64编码的 data-uri 对象。
readAsArrayBuffer(Blob|File) ：读取结果是一个 ArrayBuffer 对象。
主要的回调函数：
onabort：读取中断时触发。
onerror：读取出错时触发。
onload：读取成功后触发。
2、上传文件
一般情况下有两种方式上传文件：
2.1、通过File对象上传图片的二进制信息；
2.2、通过FileReader. readAsDataURL上传Base64编码对象；

四、入坑

1、accept="image/*"与accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
问题：使用前者在webkit内核浏览器可能导致选择文件延迟；而使用后者则很容易漏掉一些图片（尤其是一些奇葩的Android机型）
解决：没有好的解决方法，只能根据应用场景进行取舍。

2、capture="camera"不可用
问题：在一款华为的机器上加上capture="camera"后，不弹出文件选择框；
解决：去掉capture="camera"；（好尴尬，真心不知道怎么办）

3、input file无法重复选择一个文件
问题：在监听input的onchange时，如果第二次选择的与第一次选择的文件相同，则不会回调onchange。
解决：如果确实需要回调，可以克隆一个同样的input

inputElement.after(newSomeQa.clone().val(""));
inputElement.remove();

4、iPhone的照片被90°旋转
问题：iPhone中保存的照片采用background-img的方式显示时会被90°旋转
解决：
4.1 采用img标签显示
4.2 读取照片的EXIF信息在显示做相应的旋转处理（才用background-img显示图片在处理缩放截取时比较方便）

EXIF.getData(element.files[0], function () {
    var orientationPhoto = EXIF.getTag(this, 'Orientation');
    var lastDeg;
    if (orientationPhoto == 6) {
       lastDeg = 90;
    } else if (orientationPhoto == 8) {
       lastDeg = 270;
    } else if (orientationPhoto == 3) {
       lastDeg = 180;
    }
    document.getElementById('img-display').style.transform = 'rotate(' + lastDeg + 'deg)';
});

五、附录——EXIF
Exif是一种图像文件格式，在JPEG格式头部插入了数码照片的一些拍摄信息。
EXIF.js——https://github.com/exif-js/exif-js 。