html:
<input type="file" οnchange="changepic(this)" id="file" accept="image/png, image/jpeg, image/jpg" /> <div class="up-img"> <img id="upload-img" src="" alt="" /> </div>
方法一: 通过src加载图片的base64预览图片
function changepic(that){ var reads = new FileReader(); var f = document.getElementById('file').files[0]; reads.readAsDataURL(f); reads.onload = function (e){ document.getElementById('upload-img').src = reads.result; }; }
方法二: 获取图片的本地url
function changepic(obj) { var newsrc=getObjectURL(obj.files[0]); document.getElementById('upload-img').src = newsrc; } 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 ; }