FileReader图片预览上传

引用：

<script src="js/jquery.min.js"></script>

html:

<div style="width:200px;height:200px;"> <label for="ceshi" style="display:block;">   <img style="width:200px;height:200px;" id="image" src=""/>   <input id="ceshi" type="file" onchange="selectImage(this);" hidden/> </label></div>

js:

var image = ''; function selectImage(file){  if(!file.files || !file.files[0]){     return;  }  var reader = new FileReader();  reader.onload = function(evt){    document.getElementById('image').src = evt.target.result;    image = evt.target.result;  }  reader.readAsDataURL(file.files[0]); } function uploadImage(){    $.ajax({      type:'POST',      url: 'ajax/uploadimage',  //图片上传地址      data: {image: image},      async: true,      dataType: 'json',      success: function(data){      if(data.success){        alert('上传成功');      }else{      alert('上传失败');      }    },   error: function(err){     alert('网络故障');   }  });}

结果：