$("input[type='file']").change(function() {
var file = this.files[0];
if (window.FileReader) {
var reader = new FileReader();
reader.readAsDataURL(file);
//监听文件读取结束后事件    
reader.onloadend = function(e) {
console.log(e.target.result+"路径")
$(".img").attr("src", e.target.result); //e.target.result就是最后的路径地址
};
}
});

文章来自 https://blog.csdn.net/qq_33769914/article/details/54705820

参考 https://blog.csdn.net/qq_30100043/article/details/76408915

如何获取input框type=file选中的文件对象(FileReader)的更多相关文章

  1. input标签type="file"上传文件的css样式

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. input框type=file设置cursor:pointer的问题

    为了让美化上传文件框,设置了cursor:pointer;,然而不起作用,然后百度找到了解决方法,设置font-size:0,这样就可以了.

  3. js/jquery 获取本地文件的文件路劲 获取input框中type=‘file’ 中的文件路径(转载)

     原文:http://blog.csdn.net/niyingxunzong/article/details/16989947 js/jquery 获取本地文件的文件路劲 获取input框中type= ...

  4. input的type=file触发的相关事件

    与input相关的事件运行的过程.添加了一些相关的方法测试了一下.input的type=file的运行流程. 我们书写了mousedown,mouseup,click,input,change,foc ...

  5. input type=file 上传文件样式美化(转载)

    input type=file 上传文件样式美化 来源:https://www.jianshu.com/p/6390595e5a36 在做input文本上传时,由于html原生的上传按钮比较丑,需要对 ...

  6. 小程序登录时如何获取input框中的内容

    最近写小程序项目遇到一些问题,今天整理下这些问题的解决方法,希望对用户有帮助.下面是登录页,点击登录时获取input框中的值, 效果如下: wxml布局如下: <view > <in ...

  7. js通過name获取input框输入值

    var account = $("input[name='account']").val();//获取input框输入值

  8. vue项目内嵌入到app input type=file 坑(文件上传插件)

    w问题描述: 我用vue-cli完成的一个移动端项目,内嵌到app当中,用原生的input type=file 来完成文件上传.在安卓下没有问题但是在苹果手机 上传第二次手机就会发生白屏 并无缘无故跳 ...

  9. python 之 前端开发(form标签、单选框、多选框、file上传文件、按钮、label标签、下拉列表、textarea标签、fieldset标签、table标签)

    11.25 form标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

随机推荐

  1. Django框架ORM常用参数汇总_模型层

    primary_key 如果为True,那么这个字段就是模型的主键. 如果你没有指定任何一个字段的primary_key=True, Django就会自动添加一个IntegerField字段做为主键, ...

  2. CodeForces - 960F Pathwalks —— 主席树(n棵线段树)

    题目链接:https://vjudge.net/problem/CodeForces-960F You are given a directed graph with n nodes and m ed ...

  3. ubuntu gitlab服务器搭建

    gitlab服务器搭建 1.安装依赖包 sudo apt-get install curl openssh-server ca-certificates postfix 执行完成后,出现邮件配置,选择 ...

  4. 鸟哥的Linux私房菜-第10/11/12/13章(vim程序编辑器、学习bash、正则表达式与文件格式化处理、学习Shell Scripts)

    第10章 vim程序编辑器 可以将vim看做vi的进阶版本,vim可以用颜色或底线等方式来显示出一些特殊的信息. 为何要学习vim?因为: a. 所有的 Unix Like 系统都会内建 vi 文书编 ...

  5. JavaScript(3)

    var a=90; switch(a){ case "890": window.alert("ok"); break; case 90: window.aler ...

  6. 【thrift】vc中使用thrift中文字符串乱码问题解决

    问题描述: VC中使用Apache thrift时,如果字符串中包含中文,会出现乱码问题,这个问题的原因是由于thrift为了达到跨语言交互而使用了UTF-8格式发送字符串,这点对java或者C#不会 ...

  7. 华为机试 可怕的N阶乘

    题目标题: 计算阶乘n!是一件可怕的事情,因为当n并不是很大时,n!将是一个很大的值.例如13! = 6227020800,已经超过了我们常用的unsigned int类型的取值范围.请设计一个程序, ...

  8. kettle导数到user_用于left join_20160928

    这篇博客主要是给mysql left join做铺垫,需要现在本地数据库创建一个users 数据表 然后去和 test_a03order表  left join 一.首先在local_db数据库先创建 ...

  9. CF285 E Positions in Permutations——“恰好->大于”的容斥和允许“随意放”的dp

    题目:http://codeforces.com/contest/285/problem/E 是2018.7.31的一场考试的题,当时没做出来. 题解:http://www.cnblogs.com/y ...

  10. 中国移动推出NB-IoT/eMTC/GSM多模通信模组Qualcomm调制解调器支持

    亚洲电子消费展(CES Asia)在上海举行.期间,中国移动正式推出NB-IoT/eMTC/GSM三模通信模组A9500.该通信模组采用Qualcomm MDM9206 LTE IoT调制解调器,具有 ...