操作文件的接口

• 　第一步，获取 input 

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

• 　第二部，通过input 获取FileList

　　　　var fileList= fileInput.files;

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

　　　　var file= fileList[0];

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

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

 

<input type="file" id="myfile" multiple="multiple" onchange="toDataUrl(this.files[0])">
<br>
<div>
    <img src="" style="width:100px; height: 100px;" id="img">
    <audio id="audio" src="" controls="controls"></audio>
    <video id="vid" controls="controls"></video>
</div>
<script type="text/javascript">
    function toDataUrl(file) {                       //上传图片和音乐、视频
        var reader = new FileReader();             //方式有很多，其中两种
        reader.readAsDataURL(file);
        reader.onload = function (event) {
            console.log(event.target.result);
            $("#audio").attr("src", event.target.result);
        }
    }
    function previewWithObjuectUrl() {
        var target = event.target.files[0];
        var url = URL.createObjectURL(target);
        vid.src = url;
        vid.play();
        console.log();
    }