js-input file 文件上传（照片，视频，音频）

在此做一个笔记

<input type="file" accept="image/*" capture="camera">

<input type="file" accept="video/*" capture="camcorder">

<input type="file" accept="audio/*" capture="microphone">

accept表示打开的系统文件目录；

capture表示的是系统所捕获的默认设备（camera：照相机；camcorder：摄像机；microphone：录音）；

multiple：支持多选，当支持多选时，multiple优先级大于capture；

再我做的一个红包活动中，需要笑脸照片来判断发红包，所以用到了input type="file"的标签属性，本来用的capture="camera"直接拍照，但是在ios上调相机是没有美颜功能的，担心用户不会选择上传，所以之后改变策略了，用了multiple，就是这样；

我的源代码：

 <img src="" class="closebtnimg" id="closeimg1" />       //该标签是要放上传的照片的哈

<input type="file" accept="image/*" multiple  class="img"  onchange="javascript:setImagePreview('addimg1','closeimg1');" id="addimg1" />（错误的，有些手机不支持，底部有更新的正确的写法）

 

js:

 

    var docObj;
    function setImagePreview(btnfile, imgId) {
         docObj = document.getElementById(btnfile);
         var imgObjPreview = document.getElementById(imgId);
         if (docObj.files && docObj.files[0]) {
                   imgObjPreview.style.display = 'block';
                   imgObjPreview.style.width = '100%';
                   imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
        } else {
                 imgObjPreview.style.display = 'block';
        }
      return true;
   }

 

以上是我的代码，很完美的哈，经过测试验证的。

 

 

2018-7-11更新调整

本来以上的代码是ok的，但是后期我用了大量的手机测试，有些手机是不成功的，所以上面的Html更新为最新的：

<input type="file" accept="image/*"  class="img"  onchange="javascript:setImagePreview('addimg1','closeimg1');" id="addimg1" />  （正确的，所有手机支持选择拍照，照片）