h5 本地上传图片预览源码下载

最近做了一个项目就是上传一张自拍照，根据颜值测试出不同的答案，并且可以生成一张图片。拿到这需求的时候第一个反应就是想到了利用微信的图片上传接口，因为我们需要拿到用户真实的图片，小游戏就是为了宣传推广。

但是事与愿违，微信上传图片IOS 和安卓还有很大的区别，获取照片的url时出现问题，最后才想起来H5和js就可以实现我们的需求。搞了半天的微信最后果断放弃… …

下面我们一起看一下H5怎么实现本地上传图片预览的效果的：

<div class="test_btn">
    <img src="img/btn_test.png" /> //这个是一个设计的上传按钮的图片
    <input type="file" id="file" class="upImg" accept="image/*" />
</div>

这里就是图片生成本地url后所展示的位置

<div class="head" >
    <img class="wximage" src="" id="img" />
</div>

1、capture=”camera/camcorder/microphone”

使用input：file标签, 去调用系统默认相机，摄像，录音功能，其实是有个capture属性，直接说明需要调用什么功能

<input type=”file” accept=”image/*” capture=”camera”>
<input type=”file” accept=”video/*” capture=”camcorder”>
<input type=”file” accept=”audio/*” capture=”microphone”>

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本地上传和预览的功能了。