1. 程式人生 > >頁面動態改變img標籤內容

頁面動態改變img標籤內容

改變檔案上傳控制元件的值,然後動態顯示到上面的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);
     });
});