浏览器端上传图片读取图片内容

<div class="form-group">
    <label class="col-sm-3 text-right" style="margin-top:18px">图片</label>
    <fieldset>
        <div class="col-sm-12 text-left">
            <div class="form-group">
                <input class="col-sm-7" type="file" name="uploadImage" id="uploadImage-openImage" onchange="showImage(this)"/>
                <input type="hidden" name="wx2DCodeUrl" id="imageUrl" value=""/>
                <input type="button" value="上传图片" id="uploadImageBtn-openImage" onclick="confirmUploadAgain()"/>
            </div>
        </div>
    </fieldset>
</div>
<div class="form-group clearfix" id="areaIcoShow-openImage">
    <div class="col-sm-12">
        <img class="center-block" src="../../img/8985207189_01ea27882d_m.jpg" id="areaImage" style="width: 150px;height: 100px;">
    </div>
</div>

function showImage() {
    var obj = $("#uploadImage-openImage")[0].files[0];
    var fr = new FileReader();
    fr.onload = function (ev) {
        $("#areaImage").attr('src', this.result);
    };
    fr.readAsDataURL(obj);
}