h5 调用相机、相册实现本地上传图片预览

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属性,表示可以支持多选,如:

<input type=”file” accept=”image/*” 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本地上传和预览的功能了。

未经允许不得转载:小月博客 » h5 调用相机、相册实现本地上传图片预览
微信公众号
关注我们,每天及时接收最新的学习资料
12000人已关注
分享到:
赞(1) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏