1. <label>
  2.   <div class="myusercenter-image-none">
  3.     <img src="" class="myusercenter-image" alt="">
  4.     <input type="file" class="myusercenter-hard-img">
  5.   </div>
  6. </label>
  1. // 上传头像
  2. $(function() {
  3. $('.myusercenter-hard-img').on('change', function(e) {
  4. var files = e.target.files;
  5. var reader = new FileReader();
  6. reader.readAsDataURL(files[0], "UTF-8");
  7. reader.onload = function(evt) {
  8. var fileString = evt.target.result;
  9. var date = {
  10. "file": fileString
  11. };
  12. $('.myusercenter-image').attr('src', fileString);
  13.  
  14. console.log(fileString)
  15.  
  16. // $.post("", date).success(function (result) {
  17. // alert("ok");
  18. // });
  19. }
  20. })
  21. })

js 上传头像img的更多相关文章

  1. js 上传头像

    css .con4{width: 230px;height: auto;overflow: hidden;margin: 20px auto;color: #FFFFFF;} .con4 .btn{w ...

  2. 上传头像,界面无跳转,php+js

    上传头像,界面无跳转的方式很多,我用的是加个iframe那种.下面直接上代码. html: //route 为后端接口//upload/avatar 为上传的头像的保存地址//imgurl=/uplo ...

  3. jQuery 自制上传头像插件-附带Demo实例(ajaxfileupload.js第三弹)

    这篇文章主要是对前两篇关于ajaxfileupload.js插件的文章 <ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload. ...

  4. Jcrop+uploadify+php实现上传头像预览裁剪

    最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁 ...

  5. js 上传文件后缀名的判断 var flag=false;应用

    js 上传文件后缀名的判断  var flag=false;应用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  6. asp.net mvc上传头像加剪裁功能介绍

    正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery.Jcrop 后台是asp.net mvc ...

  7. asp.net mvc上传头像加剪裁功能

    原文:asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jqu ...

  8. mvc上传头像加剪裁功能

    asp.net mvc上传头像加剪裁功能 正好项目用到上传+剪裁功能,发上来便于以后使用. 我不能告诉你们其实是从博客园扒的前台代码,哈哈. 前端是jquery+fineuploader+jquery ...

  9. 上传头像,layui上传图片

    layui上传与bootstrap上传相似,只是不需要下插件, layui自带的已够用 先看一下前台界面,这里是用到的上传头像 先点击开始上传,头像上传至服务器中, 返回json添加至form表单中, ...

随机推荐

  1. DataGridTemplateColumn 如何获取内部控件

    WPF中有时候我们不使用DataGridTextColumn 而使用用途更加宽广的DataGridTemplateColumn 但是用途多的东西当然也更复杂. 这里说下如何取DataGridTempa ...

  2. python 迭代器 Iterator

    一.可迭代对象定义 可以直接作用于for循环的数据类型有以下几种: 一类是集合数据类型,如list.tuple.dict.set.str.bytes.bytearray等: 一类是generator, ...

  3. bzoj 3745: [Coci2015]Norma【分治】

    参考:https://blog.csdn.net/lych_cys/article/details/51203960 真的不擅长这种-- 分治,对于一个(l,r),先递归求出(l,mid),(mid+ ...

  4. .NET Core 跨平台物联网开发:连接阿里云IOT(一)

    系列教程目录 (一) 连接阿里云IOT (二) 设置委托事件 (三) 上报属性 (四)  SDK文档 属性.方法.委托.类 http://pan.whuanle.cn/index.php?dir=up ...

  5. 跟我一起玩Win32开发(8):绘图(A)

    从本篇开始,我就不吹牛皮,那就吹吹兔皮吧.说说与绘图有关的东东. 要进行绘制,首先要得到一个DC,啥是DC呢?按字面翻译叫设备上下文,也可以翻译为设备描述表,它主要指API为我们封装了一些与显示设备相 ...

  6. Query on a tree again! SPOJ - QTREE3

    https://vjudge.net/problem/SPOJ-QTREE3 https://www.luogu.org/problemnew/show/P4116 一个log(LCT)比两个log( ...

  7. TNS-12508 When Issuing Any SET Command For The Listene

    TNS-12508 When Issuing Any SET Command For The Listener fact: Oracle Net Services    fact: TNS Liste ...

  8. 分区表,磁盘概念和parted的使用

    分区表,磁盘概念和parted的使用 登录陌生系统首先要做的事: 个人认为,首先得知道Linux版本的什么:cat /etc/issue df:查看磁盘的分区和数据的分配情况,类型(NFS,ext4. ...

  9. 搭建Sql Server AlwaysOn 视频教程

    本人搭建关于Sql Server 2012 AlwaysOn 的视频系列教程. 教程一: 观看及下载地址:https://pan.baidu.com/s/1QAvhgFTSyvpR5xQZbKHO3w ...

  10. net MVC 四种基本 Filter

    四种基本 Filter 概述 MVC框架支持的Filter可以归为四类,每一类都可以对处理请求的不同时间点引入额外的逻辑处理.这四类Filter如下表:   使用内置的Authorization Fi ...