<script src="/static/js/jquery.js"></script>
// 前端页面实现头像预览
// 当用户选中文件之后,也就是头像的input标签有值时触发
$('#avatar').change(function () {
var file = this.files[0];
var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function(){
$('#avatar-img').attr('src',fr.result) }
})

基于jquery读取input上传的文件内容的更多相关文章

  1. input上传限定文件类型

    input上传限定文件类型 accept="image/*"   限定为只能上传图片 accept=”audio/*   限定为只能上传音频 accept=”video/*” 限定 ...

  2. 自实现input上传指定文件到服务器

    遇到问题,解决问题,记录问题,成长就是一步一步走出来的. 一.添加 input 标签 我的工作中遇到了,需要上传pdf文件到服务器的需求,而且只能上传pdf文件,accept指定了 pdf 类型. & ...

  3. Springboot/SpringMvc 读取上传 xls 文件内容

    /** * 读取上传 xls 内容返回 * @param file * @return */@RequestMapping(value = "/read.xls")@Respons ...

  4. 基于Spring MVC实现基于form表单上传Excel文件,批量导入数据

    在pom.xml中引入: <!--处理2003 excel--> <dependency> <groupId>org.apache.poi</groupId& ...

  5. 基于jquery实现图片上传本地预览功能

    一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...

  6. asp.net配置web.config支持jQuery.Uploadify插件上传大文件

    配置web.config有两处地方需要配置,分别是集成模式和经典模式. 集成模式: <!--文件上传大小设置--> <httpRuntime requestValidationMod ...

  7. Web API之基于H5客户端分段上传大文件

    http://www.cnblogs.com/OneDirection/articles/7285739.html 查询很多资料没有遇到合适的,对于MultipartFormDataStreamPro ...

  8. 删除input上传的文件路径

    上传文件时,选择了文件后想清空文件路径,搜索了一下,用两种方法解决 <input type="file" id="fileupload" name=&qu ...

  9. 【HTML】前台input上传限制文件类型

    仅限制xls文件上传 <input id="uploadSkufile" type="file" value="批量导入" style ...

随机推荐

  1. hdu 1711Number Sequence (KMP入门,子串第一次出现的位置)

    Number Sequence Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  2. 为什么无法定义1px左右高度的容器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...

  3. 订阅 如何在IntelliJ IDEA中使用.ignore插件忽略不必要提交的文件

    如何在IntelliJ IDEA中使用.ignore插件忽略不必要提交的文件 标签: idea git 插件 分类: Git 最近初学Git,而且在使用的IDE是IntelliJ IDEA,发现IDE ...

  4. Web学习之跨域问题及解决方案

    在做前端开发时,我们时常使用ajax与服务器通信获取资源,享受ajax便利的同时,也知道它有限制:跨域安全限制,即同源策略. 同源策略(SOP),核心是确保不同源提供的文件之间是相互独立的 默认情况下 ...

  5. VM虚拟机下安装无线网卡教程

    前言: 由于最近学习olsrd需要,然后需要无线网卡支持.所以将教程分享如下. 实体机:Windows 7 虚拟机:Ubuntu 14.04 无线网卡:Tenda W311M V3.0 虚拟机软件:V ...

  6. koa2路由

    注意:必须导出 文档地址:https://npm.taobao.org/package/koa-router 例: const router = require('koa-router')() rou ...

  7. c++之手写strcmp

    int strcmp(const char* str1, const char*str2){ assert(str1 != NULL&&str2 != NULL); while (*s ...

  8. 2019-8-31-asp-dotnet-core-支持客户端上传文件

    title author date CreateTime categories asp dotnet core 支持客户端上传文件 lindexi 2019-08-31 16:55:58 +0800 ...

  9. vue @click.native

    1,给vue组件绑定事件时候,必须加上native ,不然不会生效(监听根元素的原生事件,使用 .native 修饰符) 2,等同于在自组件中: 子组件内部处理click事件然后向外发送click事件 ...

  10. 寻找 K8s 1.14 Release 里的“蚌中之珠”

    摘要: K8s 1.14 发布了,Release Note那么长,我们该从何读起? 本文由张磊.心贵.临石.徙远.衷源.浔鸣等同学联合撰写. Kubernetes 1.14.0 Release 已经于 ...