zoukankan      html  css  js  c++  java
  • 操作文件的接口

    •  第一步,获取 input 

        var fileInput=douument.getElementId("myfile");

    •  第二部,通过input 获取FileList

        var fileList= fileInput.files;

    •  第三部 ,通过FileList,获取某个文件的对象

        var file= fileList[0];

    •  简单来说 获取File 对象 就是:

        file = document.getElementId("myfile).file[0];

     

     1 <input type="file" id="myfile" multiple="multiple" onchange="toDataUrl(this.files[0])">
     2 <br>
     3 <div>
     4     <img src="" style="100px; height: 100px;" id="img">
     5     <audio id="audio" src="" controls="controls"></audio>
     6     <video id="vid" controls="controls"></video>
     7 </div>
     8 <script type="text/javascript">
     9     function toDataUrl(file) {                       //上传图片和音乐、视频
    10         var reader = new FileReader();             //方式有很多,其中两种
    11         reader.readAsDataURL(file);
    12         reader.onload = function (event) {
    13             console.log(event.target.result);
    14             $("#audio").attr("src", event.target.result);
    15         }
    16     }
    17     function previewWithObjuectUrl() {
    18         var target = event.target.files[0];
    19         var url = URL.createObjectURL(target);
    20         vid.src = url;
    21         vid.play();
    22         console.log();
    23     }
  • 相关阅读:
    多进程多线程
    JS---闭包
    Canvas:时钟
    CANVAS画布与SVG的区别
    CSS盒模型
    CSS---伪类与伪元素的区别
    CSS生成内容
    利用画布绘制折线图
    uiwebview与objective-c
    GoBelieve JS IM SDK接入备忘
  • 原文地址:https://www.cnblogs.com/nongzihong/p/9923007.html
Copyright © 2011-2022 走看看