FileReader图片预览上传

最新推荐文章于 2022-07-06 17:46:07 发布

shengmeshi

最新推荐文章于 2022-07-06 17:46:07 发布

阅读量298

点赞数

分类专栏： web前端文章标签： FileReader 图片预览上传

本文链接：https://blog.csdn.net/shengmeshi/article/details/76098365

版权

web前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

引用：

<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('网络故障');
   }
  });
}