JavaScript中的FileReader图片预览上传功能实现代码

 更新时间:2017年07月24日 15:52:13   作者:shengmeshi  
本文通过实例代码给大家介绍了js中的FileReader图片预览上传功能,代码分为html和js代码两部分,具体实现代码大家参考下本文

关于filereader图片预览上传功能的实现代码如下所示:

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(){
  console.log(image);
  $.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('网络故障');
  }
 });
}

引用:<script src="js/jQuery.min.js"></script>

总结

以上所述是小编给大家介绍的JavaScript中的FileReader图片预览上传功能实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 从父页面读取和操作iframe中内容方法

    从父页面读取和操作iframe中内容方法

    在父页面中访问iframe中的各个元素与一般的访问页面元素无本质区别,无非是需要在父页面中事先获取需要处理的iframe对象,在获取iframe对象后,其操作基本没什么特别之处。
    2009-07-07
  • 微信小程序从注册账号到上架(图文详解)

    微信小程序从注册账号到上架(图文详解)

    这篇文章主要介绍了微信小程序从注册账号到上架详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-07-07
  • ES6的新特性概览

    ES6的新特性概览

    Nick Justice是GitHub开发者计划的一员。早在ES6语言标准发布之前,他就借助像Babel这样的转译器以及最新版本的浏览器在自己的项目中使用ES6特性。他认为,ES6的新特性将极大地改变JavaScript的编写方式
    2016-03-03
  • Web3.js查询以太币和代币余额及转账

    Web3.js查询以太币和代币余额及转账

    这篇文章主要介绍了Web3.js查询以太币和代币余额以及转账,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • 检测用户按键

    检测用户按键

    检测用户按键...
    2006-07-07
  • JavaScript navigator.userAgent获取浏览器信息案例讲解

    JavaScript navigator.userAgent获取浏览器信息案例讲解

    这篇文章主要介绍了JavaScript navigator.userAgent获取浏览器信息案例讲解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
    2021-08-08
  • JavaScript实现表单全选或反选效果

    JavaScript实现表单全选或反选效果

    这篇文章主要为大家详细介绍了JavaScript实现表单全选或反选效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • 基于JavaScript实现简单的随机抽奖小程序

    基于JavaScript实现简单的随机抽奖小程序

    为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译运行工具也能够尽可能简单(诸如text文本即可编辑,window系统自带的浏览器即可编译运行的情况),决定尝试使用javascript来做
    2016-01-01
  • 传智播客学习之java 反射

    传智播客学习之java 反射

    昨天是预热班学习的最后一天,为了检验我们是否能够升入就业班学习,进行了预热班结课考试。
    2009-11-11
  • 获取当前点击按钮的id用this.id实现

    获取当前点击按钮的id用this.id实现

    这篇文章主要介绍了获取当前点击按钮的id的方法,,需要的朋友可以参考下
    2014-03-03

最新评论