上传图片时预览

简述

　　　　本文的使用场景主要是用户修改头像，选择本地图片后在页面上面显示选择的图片。使用jQuery+js实现。

---

1.首先，页面上有一个input[type='file']标签

<input id="head" name="headPortrait" class="btn btn-xm btn-outline btn-primary" style="margin: 0 auto" type="file" value="选择图片" accept="image/png,image/jpeg">

　　accept可以在前台限制用户可以上传什么类型的文件。

2.在标签下面添加一个div，用来显示用户选择的图片

<div id="headImg" style="margin-top: 10px;"></div>

3.给input绑定change事件，获取并加载图片

$("#head").change(function () {
    var eImg = $("<img width='120px' name='pic' />");
    eImg.attr('src', getObjectURL(this.files[0]));
    $("#headImg").html(eImg); 6 })

//获取URL
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;
}

 完事