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 相关文章推荐
在textarea文本域中显示HTML代码的方法
Mar 06 Javascript
google地图的路线实现代码
Aug 20 Javascript
设为首页加入收藏兼容360/火狐/谷歌/IE等主流浏览器的代码
Mar 26 Javascript
JavaScript中实现继承的三种方式和实例
Jan 29 Javascript
js实现楼层导航功能
Feb 23 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
Feb 26 Javascript
vue中mint-ui的使用方法
Apr 04 Javascript
js数组去重的方法总结
Jan 18 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
vue实现滑动到底部加载更多效果
Oct 27 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 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
Zend Studio 实用快捷键一览表(精心整理)
2013/08/10 PHP
php旋转图片90度的方法
2013/11/07 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
PHP网站建设的流程与步骤分享
2015/09/25 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
JavaScript使用DeviceOne开发实战(一) 配置和起步
2015/12/01 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
使用AngularJS 跨站请求如何解决jsonp请求问题
2017/01/16 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
JavaScript解析机制与闭包原理实例详解
2019/03/08 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
JavaScript变量Dom对象的所有属性
2020/04/30 Javascript
python实现数据导出到excel的示例--普通格式
2018/05/03 Python
Python动态生成多维数组的方法示例
2018/08/09 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
使用Pandas对数据进行筛选和排序的实现
2019/07/29 Python
Python类中的魔法方法之 __slots__原理解析
2019/08/26 Python
使用Python制作缩放自如的圣诞老人(圣诞树)
2019/12/25 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
python实现PCA降维的示例详解
2020/02/24 Python
python 回溯法模板详解
2020/02/26 Python
Kiehl’s科颜氏西班牙官方网站:源自美国的植物护肤品牌
2020/02/22 全球购物
亚洲领先的设计购物网站:Pinkoi
2020/11/26 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
档案保密承诺书
2014/06/03 职场文书
商务经理岗位职责
2014/08/03 职场文书
党性观念心得体会
2014/09/03 职场文书
英文慰问信
2015/02/14 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
2016年区委书记抓基层党建工作公开承诺书
2016/03/25 职场文书
请假条应该怎么写?
2019/06/24 职场文书
Spring依赖注入多种类型数据的示例代码
2022/03/31 Java/Android