页面动态改变img标签内容

Wo_Ai_Java

于 2015-09-10 10:11:23 发布

阅读量589

点赞数 1

本文链接：https://blog.youkuaiyun.com/Wo_Ai_Java/article/details/48339257

版权

改变文件上传控件的值，然后动态显示到上面的img标签中

<img id="img" src="./a.jpg"><br>
<input id="file" type="file">

在IE中：

$(function(){
     $("#file").change(function(){
        var path = $(this).val();
        $("#img").attr("src", path);
     });
});

但这种方法仅在IE中起作用，在其他如FF，Chrome中不起效，因为浏览器基于安全的考虑，禁止浏览器直接访问磁盘文件，但是可以通过事件属性来获取到。

如下：

$(function(){
     $("#file").change(function(event){
        var path = URL.createObjectURL(event.target.files[0]);
        $("#img").attr("src", path);
     });
});