zoukankan      html  css  js  c++  java
  • 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" />  (正确的,所有手机支持选择拍照,照片)

     

  • 相关阅读:
    ACID
    Elasticsearch SQL
    【协议】AAA Radius协议的常用报文分析
    【linux】内核-模块(驱动)命令原理
    【linux】masm汇编系统调用说明
    pytest 8+.yaml文件详解---实现接口自动化
    谷歌 Chrome 浏览器将迎来设计、媒体播放控件改进
    长期免费的通配符证书获取 2021年最新方法
    Flink:部署运行
    Linux:nc命令
  • 原文地址:https://www.cnblogs.com/weblff/p/14990103.html
Copyright © 2011-2022 走看看