$("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常用数据类型并尽量多的写出其中的方法

    #1 把字符串的第一个字符大写 string.capitalize() #2 返回一个原字符串居中,并使用空格填充至长度 width 的新字符串 string.center(width) #3 返回 ...

  2. Light OJ 1005 - Rooks 数学题解

    版权声明:本文作者靖心.靖空间地址:http://blog.csdn.net/kenden23/,未经本作者同意不得转载. https://blog.csdn.net/kenden23/article ...

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

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

  4. javascript 跨浏览器事件处理

    <div id="myDiv" style="width:100px; height:100px; border:1px solid #f00;"> ...

  5. jQuery蓝色修边tab标签切换

    jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换 ...

  6. overflow:hidden真的失效了吗?

    项目中常常有同学遇到这样的问题,现象是给元素设置了overflow:hidden,但超出容器的部分并没有被隐藏,难道是设置的hidden失效了吗? 其实看似不合理的现象背后都会有其合理的解释. 我们知 ...

  7. Java中的访问控制

    修饰符 同一个类 同一个包 子类 整体 private Yes       default Yes Yes     protected Yes Yes Yes   public Yes Yes Yes ...

  8. SpringBoot 版本升级后报错 Cannot instantiate interface org.springframework.context.ApplicationContextInitializer

    本篇博客纯粹讲我遇到这个问题的解决以及思考,如果你想知道解决方法,可以直接看正确解决方案部分.因为是前端写的,所以可能有些明显的内容很容易就看出来了. 首先:升级后更新其他依赖,以及Applicati ...

  9. python处理时间汇总

    1.将字符串的时间转换为时间戳 方法: a = "2013-10-10 23:40:00" 将其转换为时间数组 import time timeArray = time.strpt ...

  10. 用PCA降维 (Principal Component Analysis,主成分分析)

    参考资料:Mastering Machine Learning With scikit-learn 降维致力于解决三类问题.第一,降维可以缓解维度灾难问题.第二,降维可以在压缩数据的同时让信息损失最 ...