URL.createObjectURL() 实现本地上传图片 并预览功能

URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。

mdn传送门：https://developer.mozilla.org/zh-CN/docs/Web/API/URL/createObjectURL

 

 

<input class="avatarCon" type="file" />

<div class="showImg">
　　<img src="" alt="" />
</div>

function getObjectURL(file) {
　　var url = null;
　　if (window.createObjectURL != undefined) {
　　　　url = window.createObjectURL(file);
　　} else if (window.URL != undefined) {
　　　　url = window.URL.createObjectURL(file);
　　} else if (window.webkitURL != undefined) {
　　　　url = window.webkitURL.createObjectURL(file);
　　}
　　return url;
}

 

var avatarInput = $('.avatarCon');
avatarInput.change(function(event) {

　　var myPic = $(this).get(0).files[0];

　　$('.showImg img').attr('src',getObjectURL(myPic));
});