$("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. Linux入门基础(一)——ls、mkdir命令

  2. 利用wxpython显示OpenCV图像

    核心代码 import wx, cv2 import numpy as np # Start with a numpy array style image I'll call "source ...

  3. Java基础教程:对象比较排序

    Java基础教程:对象比较排序 转载请标明出处:http://blog.csdn.net/wangtaocsdn/article/details/71500500 有时候需要对对象列表或数组进行排序, ...

  4. Django 模型层--单表

    ORM  简介 MTV或者MVC框架中包括一个重要的部分,就是ORM,它实现了数据模型与数据库的解耦,即数据模型的设计不需要依赖于特定的数据库,通过简单的配置就可以轻松更换数据库,这可以大大的减少了开 ...

  5. REST、DRF(View源码解读、APIView源码解读)

    一 . REST            前言 1 . 编程 : 数据结构和算法的结合 .小程序如简单的计算器,我们输入初始数据,经过计算,得到最终的数据,这个过程中,初始数据和结果数据都是数据,而计算 ...

  6. Android Weekly Notes Issue #290

    Android Weekly Issue #290 December 31st, 2017 Android Weekly Issue #290 本期内容包括介绍Kotlin逆变协变的一篇(虽然没说清楚 ...

  7. 使用diff制作补丁【学习笔记】

    源文件:main.c #include <stdio.h> int main() { printf("hello"); } 修改之后的文件: main1.c #incl ...

  8. LightOJ - 1284 Lights inside 3D Grid —— 期望

    题目链接:https://vjudge.net/problem/LightOJ-1284 1284 - Lights inside 3D Grid    PDF (English) Statistic ...

  9. 算法(Algorithms)第4版 练习 1.3.10

    主要思路:和1.3.9相似,只不过运算表达式的生成方式不一样 用Dijkstra的双栈算法. 遇到数字则压入数字栈中(String). 遇到运算符则压入运算符栈中(String). 遇到右括号时,从数 ...

  10. cmake编译成功之后VS2015可以build Solution但是不可以运行的解决办法

    1.在VS2015解决方案管理器中删除掉ALL_BUILD和ZERO_CHECK项,只保留Cmake生成的工程文件. 2.进行第一部之后还是有可能生成(build)失败,此时有可能是缺少文件.