$("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. centos7 安装jdk9 总结

    升级jdk, 从jdk8 升级到jdk9 1:卸载jdk8: 1〉 [root@localhost conf.d]# rpm -qa|grep java javapackages-tools-3.4. ...

  2. 阿里云ecs docker使用(4)---mongo docker

    1.新建一个Dockerfile文件  vim Dockerfile #VERSION 0.1.0 FROM ubuntu:14.04 #Install some RUN apt-get clean ...

  3. testng testcase失败重试

    简单介绍 需求场景:测试移动端应用,常会因为点击失效.网络延迟大等原因导致测试脚本失败.这时,需要自动重新运行失败的脚本,直到脚本成功通过或者到达限定重试次数. 解决方案:实现testng的IRetr ...

  4. TensorFlow Action(开山使用篇)

    1.TensorFlow安装: 使用pip install tensorflow安装CPU版: 或使用pip install tensorflow-gpu==1.2.1指定版本安装GPU版. 2.Te ...

  5. luoguP3769 [CH弱省胡策R2]TATT

    luoguP3769 [CH弱省胡策R2]TATT PS:做这题前先切掉 P4148简单题,对于本人这样的juruo更助于理解,当然dalao就当练练手吧 题目大意: 现在有n个四维空间中的点,请求出 ...

  6. 在Linux下搭建我的世界(Minecraft)服务器

    最近薅了百度云双12的羊毛,1核2G一年150.突然想起以前大学整个宿舍通宵开黑挖泥土的岁月,所以刚好趁着这台服务器,打算自己搭建一个我的世界服务器,重温一下以前的感觉. 超详细Linux搭建Java ...

  7. node+express上传图片到七牛

    本人微信公众号:前端修炼之路,欢迎关注 最近做项目的时候有一个上传图片的需求,由于没有后端的配合,所以决定自己来搭个服务器,实现上传图片功能.以后如果需要修改成java或者php为后端,直接使用即可, ...

  8. jzyz集训 0612

    今天闵神找的题,题目质量还算不错,就是有些偏套路了. 第一题:定义一个排列是合法当且仅当这个排列中不存在大于2的循环节,询问有多少长度为n的排列是合法的且B排列是该排列的子序列. 恩...这题目其实不 ...

  9. 深入浅出理解linux inode结构【转】

    本文转载自:https://blog.csdn.net/fantasyhujian/article/details/9151615 一.inode是什么? 参考文档:http://tech.diann ...

  10. Spring Boot2.0之多数据源分布式事务问题

    分布式事务解决方案的问题, 分布式事务产生的原因: 多个不同的服务连接不同的数据源 ,做分布式事务的管理. 这种情况是连接两个数据源的情况,然后事务管理器是这样的 只管理了test02的这端业务代码. ...