JS上传文件监听获取路径地址

最新推荐文章于 2023-03-07 14:14:55 发布

原创最新推荐文章于 2023-03-07 14:14:55 发布 · 2.7k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种利用HTML和jQuery实现文件上传预览的方法。通过监听文件输入变化，运用FileReader API读取图片文件，并将Base64编码后的图片显示在页面上。

html

<input type="file" id="file_input">
<img src="" class="img" />

jquery

 $("input[type='file']").change(function(){   
 var file = this.files[0];
   if (window.FileReader) {    
            var reader = new FileReader();    
            reader.readAsDataURL(file);    
            //监听文件读取结束后事件    
          reader.onloadend = function (e) {
            $(".img").attr("src",e.target.result);    //e.target.result就是最后的路径地址
            };    
       } 
});