$("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. git学习------>"Agent admitted failure to sign using the key." 问题解决方法

    今天用git clone 命令clone服务器上的代码时候报了如下的错误: ouyangpeng@oyp-ubuntu:~/Android/git_canplay_code$ git clone gi ...

  2. 流畅python学习笔记:第十四章:迭代器和生成器

    迭代器和生成器是python中的重要特性,本章作者花了很大的篇幅来介绍迭代器和生成器的用法. 首先来看一个单词序列的例子: import re re_word=re.compile(r'\w+') c ...

  3. cordova 实现拨打电话-只需两步(H5)

    cordova 实现拨打电话: 第一步配置conf.xml在cordova中所有的URL Schemes 都是服从于白名单的,所以a tel 在这无法正常使用.解决方法是在项目config.xml中添 ...

  4. java中的clone方法

    Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象.那 ...

  5. JSP&Servlet(转)

    第一篇:Web应用基础1.概念:  1.1应用程序分类     a.桌面应用程序:一般是指采用client/server即客户机/服务器结构的应用程序.     b.web应用程序:一般是指采用Bro ...

  6. 怎样避免C#中将小数转换为字符串时出现科学记数法

    在C#中如果float.double.decimal类型的值,小数点后的0太多时,C#会用科学记数法来表示小数的值. 例如下面的double类型0.00009,如果我们直接将其用ToString()方 ...

  7. 《高性能Javascript》 Summary(二)

    第四章.算法和流程控制 Algorithms And Flow Control 原因:代码整体结构是执行速度的决定因素之一.代码量少不一定运行速度快,代码量多不一定运行速度慢.性能损失与组织代码和具体 ...

  8. 《avascript 高级程序设计(第三版)》 ---第三章 基本概念

    本章主要介绍Javasript语言的一些语法: 1.严格模式:开启:"use strict"; 2.变量:全部用var来定义,在函数中使用的称为局部变量,不能全局使用. 3.数据类 ...

  9. 尚学堂xml学习笔记

    1.打开eclipse,文件-新建java project,输入文件的名字,比如输入20181112. 2.对着src右键,选择new-file,输入文件名字,比如:book.xml. 3.开始写.x ...

  10. laravel 在apache或nginx的配置

    laravel 下载后,如何运行起来呢,根据自己的应用,记录了几个关键点: 1.apache 配置: 打开http.conf文件,将mod_rewrite前面的#去掉(启用重写模块): 2.nginx ...