type="file"的input上传图片实时显示javascript代码

javascript函数代码：

function showPreview(source) {
  var file = source.files[0];
  if(window.FileReader) {
	  var fr = new FileReader();
	  console.log(fr);
	  var portrait = document.getElementById('avatar');
	  fr.onloadend = function(e) {
		portrait.src = e.target.result;
	  };
	  fr.readAsDataURL(file);
	  portrait.style.display = 'block';
  }
}

HTML代码：

<figure class="avatar">
	<img id="avatar" src="../uploadfiles/avatar.png"/>
</figure>
<span class="upload">更换头像</span>
<input type="file" id="upload" onchange="showPreview(this)"/>

因为通过css隐藏掉了默认的上传按钮，所以结合jQuery点击函数触发inupt：

$(function(){
	$('.myInfo .upload').click(function(){
		$('#upload').click();
	});
});