操作文件的接口

最新推荐文章于 2024-01-11 20:39:51 发布

梓鸿

最新推荐文章于 2024-01-11 20:39:51 发布

阅读量145

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_42928918/article/details/88409341

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

操作文件的接口

　第一步，获取 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="width: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     }