#### 方法一： * * * * * ~~~ //①file的內容(路徑)改變時觸發事件 $('#headimg').change(function(){ //獲取改變后的路徑(此處只能用原生js寫,jQuery無效) var imgUrl = document.getElementById('headimg').files[0]; console.log(imgUrl); //將路徑轉換成可識別路徑 if(window.createObjectURL != undefined) { //basic imgUrl = window.createObjectURL(imgUrl); } else if(window.URL != undefined) { //mozilla(firefox) imgUrl = window.URL.createObjectURL(imgUrl); } else if(window.webkitURL != undefined) { //webkit or chrome imgUrl = window.webkitURL.createObjectURL(imgUrl); } //將轉換后的可識別路徑賦予目標對象 $('#imghead').attr('src',imgUrl); }) ~~~ #### 方法二： * * * * * ~~~ //②將路徑轉換成可識別路徑的方法 function getObjectURL(file) { var url = null; if (window.createObjectURL != undefined) { //basic url = window.createObjectURL(file); } else if (window.URL != undefined) { //mozilla(firefox) url = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { //webkit or chrome url = window.webkitURL.createObjectURL(file); } return url; } //聲東擊西寫法(即點擊此處觸發另一事件) $('#changefile').click(function(){ var obj = $('#headimg').click(); }) //真正的事件觸發點 $('input[type="file"]').change(function(e){ var file = document.getElementById('headimg').files[0]; console.log(file); var objUrl = getObjectURL(file); $('#imghead').attr('src',objUrl); }) ~~~