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 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
JavaScript的漂亮的代码片段
Jun 05 Javascript
fixedBox固定div漂浮代码支持ie6以上大部分主流浏览器
Jun 26 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
实例解析angularjs的filter过滤器
Dec 14 Javascript
Angularjs自定义指令实现三级联动 选择地理位置
Feb 13 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
JavaScript上传文件时不用刷新页面方法总结(推荐)
Aug 15 Javascript
用vue-cli开发vue时的代理设置方法
Sep 20 Javascript
jQuery实现聊天对话框
Feb 08 jQuery
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
PHP基于数组实现的分页函数实例
2014/08/20 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
基于命令行执行带参数的php脚本并取得参数的方法
2016/01/25 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
php 微信公众平台开发模式实现多客服的实例代码
2016/11/07 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
ThinkPHP3.1.2 使用cli命令行模式运行的方法
2020/04/14 PHP
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
用Juery网页选项卡实现代码
2011/06/13 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
jQuery学习笔记之jQuery动画效果
2013/09/09 Javascript
javascript制作2048游戏
2015/03/30 Javascript
javascript+css3 实现动态按钮菜单特效
2016/02/06 Javascript
mac上node.js环境的安装测试
2017/07/03 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
python 中的列表解析和生成表达式
2011/03/10 Python
讲解Python中fileno()方法的使用
2015/05/24 Python
win10系统中安装scrapy-1.1
2016/07/03 Python
Python 私有函数的实例详解
2017/09/11 Python
Numpy掩码式数组详解
2018/04/17 Python
Python-接口开发入门解析
2019/08/01 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
Python环境下安装PyGame和PyOpenGL的方法
2020/03/25 Python
MATCHESFASHION.COM法国官网:英国奢侈品零售商
2018/01/04 全球购物
资产评估专业学生的自我鉴定
2013/11/14 职场文书
管理站站长岗位职责
2013/11/27 职场文书
县优秀教师事迹材料
2014/01/31 职场文书
幼儿教师研修感言
2014/02/12 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
实验室安全管理制度
2015/08/05 职场文书