最近在项目时，需要获取用户的上传文件的路径，便写了一个demo：

<body>

  <input type="file" name="" value="">

  <script>

    var input = document.getElementsByTagName("input")[];

    console.log(input);

    input.onchange = function () {

      var that = this;

      console.log(that.files[]);

      var src = window.URL.createObjectURL(that.files[])

      console.log(src);

      var img = document.createElement("img");

      img.style.width = "200px";

      img.src = src;

      document.body.appendChild(img);

    }

  </script>

效果及结果如下：

通过input[type=file]上传图片获取图片的尺寸：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

</head>

<body>

    <form id="form">

        <!-- .给input标签添加一个onchange事件：一旦选择文件发生变化则会触发   目的：获取选择图片的原始数据 -->

        <input type="file" id="exampleInputFile" name="icon" onchange=uploadImg(this)>

        <!-- .用一个img标签来接收文件数据  目的：（）先接收文件数据  （）通过offsetHeight属性获取宽高 -->

        <img src="" alt="" id="">

        <p>请上传图片.</p>

    </form>

</body>

<script>

    //选择图片，马上预览

    function uploadImg(obj) {

        //1.读取文件详细信息

        var file = obj.files[];

        console.log(obj);

        console.log(file);

        //2.使用FileReader读取文件信息

        var reader = new FileReader();

        //4.监听读取文件过程方法,异步过程

        reader.onloadstart = function (e) {

            console.log("开始读取....");

        }

        reader.onprogress = function (e) {

            console.log("正在读取中....");

        }

        reader.onabort = function (e) {

            console.log("中断读取....");

        }

        reader.onerror = function (e) {

            console.log("读取异常....");

        }

        reader.onload = function (e) {

            console.log("成功读取....");

            console.log(this.reault);

            //或者 img.src = this.result;  //e.target == this

            var img = document.getElementById("");

            //将解析的base64字符串赋值给img标签

            img.src = e.target.result;

            //5.这里需要异步获取，避免线程延迟

            setTimeout(function(){

                window.alert('高度' + img.offsetHeight + '宽度' + img.offsetWidth);

            },);

        }

        //3.开始读取

        reader.readAsDataURL(file)

    }

</script>

</html>

input[type='file']获取上传文件路径案例的更多相关文章

  1. input type file onchange上传文件的过程中，遇到同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

  2. input type file onchange上传文件的过程中，同一个文件二次上传无效的问题。

    不要采用删除当前input[type=file]这个节点,然后再重新创建dom这种方案,这样是不合理的.解释如下:input[type=file]使用的是onchange去做,onchange监听的为 ...

  3. input type='file'限制上传文件类型

    前端与后台数据进行对接时,就避免不了要使用ajax进行http请求,常用的请求就两个post与get:然而常见的post请求的需求是文件上传,可能我一说到文件上传大家都觉得so  easy啊,没什么嘛 ...

  4. input type=file 图片上传相关

    HTML: <input type="file" name="address"   onchange='PreviewImage(this)' value ...

  5. JS获取上传文件的绝对路径，兼容IE和FF

    <input type="file" id="fileBrowser" name="fileBrowser" size="5 ...

  6. ie下获取上传文件全路径

    ie下获取上传文件全路径,3.5之后的火狐是没法获取上传文件全路径的 /*获取上传文件路径*/ function getFilePath(obj) { var form = $(this).paren ...

  7. Atitit.js获取上传文件全路径

    Atitit.js获取上传文件全路径 1. 默认的value只能获取文件名..安全原因.. 1 2. Firefox浏览器的读取 1 3. Html5 的file api 2 4. 解决方法::使用a ...

  8. js获取上传文件内容(未完待续)

    js 获取上传文件的字节数及内容 <div> 上传文件 : <input type="file" name = "file" id = &qu ...

  9. PHP使用APC获取上传文件进度

    今天发现使用PHP的APC也能获取上传文件的进度.这篇文章就说下如何做. 安装APC 首先安装APC的方法和其他PHP模块的方法没什么两样,网上能找出好多 phpinfo可以看到APC的默认配置有: ...

随机推荐

  1. Absolute Horizontal And Vertical Centering In CSS

    Quick CSS Trick: How To Center an Object Exactly In The Center Centering in CSS: A Complete Guide Ab ...

  2. 异常及String

    异常时描述错误信息的对象,在编码过程中我们会遇到很多异常 例如: 1.java.lang.ArithmeticException 算数异常.算数运算出现错误时抛出 比如用0做除数 2.java.lan ...

  3. python版本及ML库

    一:关于Python版本的选择问题 关于Python的选择问题:要看学术界能不能把科学库迁移到Python3. 1:多个版本共用: 最近发现SciPy的最高版本是3.2,只能是退而求其次,不使用最新版 ...

  4. 【udacity】机器学习-回归

    Evernote Export 1.什么是回归? regression 在监督学习中,包括了输入和输出的样本,在此基础上,我们能够通过新的输入来表示结果,映射到输出 输出包含了离散输出和连续输出 2. ...

  5. Nginx+Keepalived(双机热备)搭建高可用负载均衡环境(HA)-转帖篇

    原文:https://my.oschina.net/xshuai/blog/917097 摘要: Nginx+Keepalived搭建高可用负载均衡环境(HA) http://blog.csdn.ne ...

  6. 元素隐藏的方式之--hidden，display，visibility

    <html lang="en"> <head> <meta charset="UTF-8"> <title>标签 ...

  7. 两个sed小技巧:sed "/变量/变量/"

    两个sed小技巧 在写shell时使用sed处理一些输出,遇到两个问题,在网上找到了相应的解决办法,在此处备份一下. [ sed处理空字符 ] 空字符,它的ASCII码值为0.在sed中如何标识空字符 ...

  8. 在Django运行安装mysqlclient和pymysql

    推荐使用douban提供的pipy国内镜像服务,如果想手动指定源,可以在pip后面跟-i 来指定源. 下载mysqlclient为例: pip install mysqlclient -i http: ...

  9. 3.1、Ansible命令简要说明及初步使用

    1.Ansible命令 1.1 Ad-hoc说明 Ansible中有一个很重要的功能就是可以执行ad-hoc命令,它表示即时.临时的意思,即表示一次性的命令.与之相对的是ansible playboo ...

  10. 关于linux三种网络形式

    今天是开始的第一天,额,没什么仪式.舍友偶然间提醒我,应该把学习的东西,做一下规划和整理.我想一想也是对的.所以开通了这个.希望以后回来可以看看自己曾经的幼稚,那证明了我不断在学习在进步.最近在准备C ...