h5 本地上传图片预览 源码下载
最近做了一个项目就是上传一张自拍照， 根据颜值测试出不同的答案，并且可以生成一张图片。 拿到这需求的时候第一个反应就是想到了利用微信的图片上传接口， 因为我们需要拿到用户真实的图片，小游戏就是为了宣传推广。
但是事与愿违， 微信上传图片IOS 和 安卓还有很大的区别，获取照片的url时出现问题， 最后才想起来H5和js就可以实现我们的需求。搞了半天的微信最后果断放弃… …
下面我们一起看一下H5怎么实现本地上传图片预览的效果的：
//这个是一个设计的上传按钮的图片
这里就是图片生成本地url后所展示的位置
1、capture=”camera/camcorder/microphone”
使用input：file标签, 去调用系统默认相机，摄像，录音功能，其实是有个capture属性，直接说明需要调用什么功能
capture表示，可以捕获到系统默认的设备，比如：camera–照相机；camcorder–摄像机；microphone–录音。
accept表示，直接打开系统文件目录。
2、multiple
input:file标签还支持一个multiple属性，表示可以支持多选，如：
加上这个multiple后，capture就没啥用了，因为multiple是专门用来支持多选的。
下面是我们要实现上传的合本地预览的效果了
// 图片上传本地预览
window.onload = function () {
var fileTag = document.getElementById('file');
fileTag.onchange = function () {
var file = fileTag.files[0];
var fileReader = new FileReader();
fileReader.onloadend = function () {
if (fileReader.readyState == fileReader.DONE) {
document.getElementById('img').setAttribute('src', fileReader.result);
}
};
fileReader.readAsDataURL(file);
})
以上代码就可以实现最简单的H5本地上传和预览的功能了。
