上传一张图片然后把他显示在下方

上传以后

<label for="" style="padding-bottom: 5px;">上传图片</label>
<span class="btn btn-default fileinput-button" style=" width: 100%;">
     <span class="glyphicon glyphicon-plus"></span>
     <input type="file" id="commentImage" name="commentImage" style="margin-left: 15px;" accept="image/*;">
 </span>

$("#commentImage").change(function() {
   var fileReader = new FileReader();//读取图片的操作 
        //FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件
    fileReader.onload = function(e) {
        $("#previewImage").append("<image class='img-thumbnail' style='max-width:100%;height:auto;' src="+e.target.result+"/>");
    };
    var imageFile = this.files[0];
    fileReader.readAsDataURL(imageFile);//读取图片的内容生成的base64编码的图
        //读取完成后，执行该回调函数，它会返回读取的结果result	
});

如何设置断点调试？
ready什么时候执行？
change什么时候执行？上传了图片事件就触发
onload什么时候执行？把图片读进来（byte字节一样的东西）之后才会把上传好的图片显示出来，先执行readAsDataURL再onload.
files[0] 返回的是一个数组，取上传图片里面的第一张。
this 指commentImage这个dom元素。事件监听dom元素的改变
append在input后面显示图片。