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图片预览上传功能实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • js用正则表达式筛选年月日的实例方法

    js用正则表达式筛选年月日的实例方法

    在本篇文章里小编给大家整理的是一篇关于js用正则表达式筛选年月日的实例方法,对此有兴趣的朋友们可以学习下。
    2021-01-01
  • JS延迟加载(setTimeout) JS最后加载

    JS延迟加载(setTimeout) JS最后加载

    为了让一个广告几秒以后再执行所以做个延迟加载的东东,用了JS实现,还蛮好用的,算是分享,也是记录吧。
    2010-07-07
  • [转]去百度面试的javascript 收获

    [转]去百度面试的javascript 收获

    前两天去了百度面试,1面是很顺利,2面基本是被问晕问傻问成了个白痴。没去之前,自己觉得自己的js还是可以的,但是被考官问的基本变成了白痴。
    2009-04-04
  • 实例分析js事件循环机制

    实例分析js事件循环机制

    这篇文章主要介绍了js事件循环机制,并通过实例分析了用法和技巧,一起学习分享下。
    2017-12-12
  • js实现网页音乐播放器

    js实现网页音乐播放器

    这篇文章主要为大家详细介绍了js实现网页音乐播放器,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Boostrap栅格系统与自己额外定义的媒体查询的冲突问题

    Boostrap栅格系统与自己额外定义的媒体查询的冲突问题

    这篇文章主要介绍了Boostrap栅格系统与自己额外定义的媒体查询的冲突问题,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-02-02
  • 小程序的基本使用知识点(非常全面,推荐!)

    小程序的基本使用知识点(非常全面,推荐!)

    开发一个小程序在如今来讲是较为简单的,但其实还是有很多的知识点需要大家记住,这篇文章主要给大家介绍了关于微信小程序基本使用的相关资料,需要的朋友可以参考下
    2021-06-06
  • 原生js实现放大镜组件

    原生js实现放大镜组件

    这篇文章主要为大家详细介绍了js实现放大镜组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 分享自己用JS做的扫雷小游戏

    分享自己用JS做的扫雷小游戏

    引用了jQuery,节省了很多鼠标点击上的判断。界面显然都是照搬Windows的扫雷啦,详细的内容注释里都有,感兴趣的朋友参考下吧
    2016-02-02
  • 左侧是表头的JS表格控件(自写,网上没有的)

    左侧是表头的JS表格控件(自写,网上没有的)

    左侧是表头的JS表格大家有木有遇到过呀,实在是没有发现,于是自己动手丰衣足食,特献上实现代码与大家共享,有类似需求的朋友可以参考下哈
    2013-06-06

最新评论