#### 方法一： * * * * * ~~~ //①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); }) ~~~