在页面即时显示要上传图片的缩略图

<table height="55">
  <tr>
    <td class="Tright"><img id="viewImg" src="<%=basePath+PropertiesUtil.getKeyValue("default.vcard.head") %>" width="50" height="50"/></td>
    <td width="65%">头像上传：<input id="viewFiles" name ="headImage" type="file" style="width:100%"/></td>
    <td width="10%"></td>
  </tr>
</table>

具体实现的js

(function () {
    var viewFiles = document.getElementById("viewFiles");
    var viewImg = document.getElementById("viewImg");
    function viewFile (file) {
        //通过file.size可以取得图片大小
        var reader = new FileReader();
        reader.onload = function( evt ){
            viewImg.src = evt.target.result;
        }
        reader.readAsDataURL(file);
    }
    viewFiles.addEventListener("change", function () {
        //通过 this.files 取到 FileList ，这里只有一个
        viewFile(this.files[0]);
    }, false);
})();