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


Posted in Javascript onJuly 24, 2017

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

Javascript 相关文章推荐
[HTML/CSS/Javascript]WWTJS
Sep 25 Javascript
Javascript中产生固定结果的函数优化技巧
Jan 16 Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 Javascript
解析Javascript中大括号“{}”的多义性
Dec 02 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
jquery获取radio值(单选组radio)
Oct 16 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
DropDownList控件绑定数据源的三种方法
Dec 24 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
vue子组件使用自定义事件向父组件传递数据
May 27 Javascript
Thinkphp5微信小程序获取用户信息接口的实例详解
Sep 26 Javascript
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
react-router4 嵌套路由的使用方法
Jul 24 #Javascript
关于react-router的几种配置方式详解
Jul 24 #Javascript
简单实现js放大镜效果
Jul 24 #Javascript
Vue列表页渲染优化详解
Jul 24 #Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 #Javascript
JavaScript取得gridview中获取checkbox选中的值
Jul 24 #Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 #Javascript
You might like
解决dede生成静态页和动态页转换的一些问题,及火车采集入库生成动态的办法
2007/03/29 PHP
php.ini 配置文件的深入解析
2013/06/17 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
php给图片添加文字水印方法汇总
2015/08/27 PHP
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
PHP实现的日历功能示例
2018/09/01 PHP
Gambit vs ForZe BO3 第三场 2.13
2021/03/10 DOTA
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
2013/08/29 Javascript
JavaScript中instanceof运算符的用法总结
2013/11/19 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
20分钟打造属于你的Bootstrap站点
2016/07/27 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
Jquery Easyui验证组件ValidateBox使用详解(20)
2016/12/18 Javascript
vue实现列表的添加点击
2016/12/29 Javascript
手把手教你搭建ES6的开发运行环境
2017/07/11 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
JavaScript图片处理与合成总结
2018/03/04 Javascript
layui 实现table翻页滚动条位置保持不变的例子
2019/09/05 Javascript
Python中operator模块的操作符使用示例总结
2016/06/28 Python
Python之re操作方法(详解)
2017/06/14 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
python模拟表单提交登录图书馆
2018/04/27 Python
Python定义一个跨越多行的字符串的多种方法小结
2018/07/19 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
Python 抓取微信公众号账号信息的方法
2019/06/14 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
大学生入党自我鉴定
2013/10/31 职场文书
法学毕业生自荐信
2013/11/13 职场文书
大学生入党自荐书
2015/03/05 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
入党积极分子群众意见
2015/06/01 职场文书
导游词之绍兴柯岩古镇
2020/01/09 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
Java服务调用RestTemplate与HttpClient的使用详解
2022/06/21 Java/Android