Web 利用H5中的FileReader实现上传文件的即时预览

部分效果展示

 

参考文档

FileReader

 

图片上传的预览

<form>
    <input type="file" id="myFile" onchange="getData();">
</form>
<img src="">
<script>
     function getData() {
         var reader = new FileReader();
         var file = document.querySelector("#myFile").files;
         reader.readAsDataURL(file[0]);
         reader.onload = function(){ // 文件读取完成时触发
             document.querySelector("img").src = reader.result;
         };
     }
</script>

音乐的上传和预览