$("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. python网络爬虫之使用scrapy自动登录网站

    前面曾经介绍过requests实现自动登录的方法.这里介绍下使用scrapy如何实现自动登录.还是以csdn网站为例. Scrapy使用FormRequest来登录并递交数据给服务器.只是带有额外的f ...

  2. SQL2005数据库放在C盘,结果C盘满了,怎么搞到D盘

    首先,你需要将自己所建立的数据库从SQL2005中分离出来,然后按照自己的存储路径找到自己所建数据库存储的位置,把它剪切到D盘就可以了.(mdf,ldf都应该考过去,自己建立路径存储就可以,再次打开的 ...

  3. ME01 创建货源清单

    [转自 http://blog.sina.com.cn/s/blog_6466e5f70100ix3p.html ] SAP中采购货源清单创建的方法有以下几种: 1.ME01 手动逐个创建. 2.ME ...

  4. Algorithm: inversion

    inversion就是逆序对 题目:现给出一个数列,求该数列中的逆序对数(逆序数).本节给出三种方法:方法一是最直接的暴力方法:方法二是基于归并分治的思想:方法三是基于线段树的.   [解法一] 暴力 ...

  5. 前端开发工程师必备JS技能-切图

    /******************************************** 学习时间:2015年12月21日 学习者:易天曦 学习目的:掌握切图技巧 学习目标:1.学会从网页设计师的P ...

  6. JavaScript中双叹号(!!)作用示例介绍

    http://www.jb51.net/article/48881.htm 经常看到这样的例子: var a: var b=!!a; a默认是undefined.!a是true,!!a则是false, ...

  7. 简洁多用途SuperSlide插件—tab标签样式

    简洁多用途SuperSlide插件—tab标签切换代码样式,由huiyi8素材网提供. 源码:http://www.huiyi8.com/tab/

  8. BZOJ 1192 [HNOI2006]鬼谷子的钱袋:二进制 砝码称重问题

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1192 题意: 鬼谷子带了a元钱,他要把a元钱分装在小袋子中,使得任意不大于a的数目的钱,都 ...

  9. Android sdk 搭建

    下载安装 http://pan.baidu.com/wap/share/home?uk=67915989&third=0 搭建Android环境时,无论使用的Eclipse还是Android ...

  10. 前端多媒体(2)—— xhr异步接收处理二进制数据

    有时我们需要把远程的视频.图片数据异步下载下来,然后在js里进行特殊处理.比如把VR的图片特殊处理,把不同封装格式的视频做一次 转封装 处理等等,这类操作都要先获取二进制数据,然后特殊处理. 这个时候 ...