最近在项目时，需要获取用户的上传文件的路径，便写了一个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. 时空上下文视觉跟踪（STC）

    论文的关键点是对时空上下文(Spatio-Temporal Context)信息的利用.主要思想是通过贝叶斯框架对要跟踪的目标和它的局部上下文区域的时空关系进行建模,得到目标和其周围区域低级特征的统计 ...

  2. 从ReadImage到ML- 一个不错的博客

    实在对不起原作者,为了不把文章淹没在 转载的海洋里.... 原文链接:     http://www.cnblogs.com/tornadomeet/archive/2012/09/26/270404 ...

  3. python版本及ML库

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

  4. vc++如何创建程序-设置断点-函数的覆盖，c++的多态性

    ---恢复内容开始--- 如何设置断点小笔记 将光标移动到你想设置断点的地方,按一下F9键即可,或者你可以用鼠标左键点击小手图标. CommentOut多行注释 函数的覆盖是在父类与子类之间的,函数的 ...

  5. 破解sublim_Text3

    1.更改hosts文件 windows系统的hosts文件在C:\Windows\System32\drivers\etc 路径下,其他系统请自行百度 在hosts文件中加入下面两行: 127.0.0 ...

  6. 【BZOJ1367】【Baltic2004】sequence - 可合并堆

    题意: 题解: 其实这是道水题啦……只不过我没做过而已 先考虑构造不严格递增序列,考虑原序列中的一段下降区间,显然区间中的$z$全取中位数最优: 那么可以把原序列拆成很多个下降序列,从头到尾加入原序列 ...

  7. [tyvj-1061]Mobile Service 动态规划

    滚动数组优化一波. 原设计状态:表示三个员工分别的位置和执行到的任务. 考虑到:执行完第i个任务,一定有员工在pos[i],那么就可以压一维,空间复杂度就算不滚动数组也可以了. (喜闻乐见,今天第一次 ...

  8. ubuntu 下jrtplib编译

    我本来想用最新的 jrtplib-3.9.1和jthread-1.3.1,可是最新的那两个版本中都是用cmake进行配置的,我搞了好久,查了好多资料也没有解决交叉编译的问题,无奈,只能选用比较老的两个 ...

  9. String与StringBuffer与StringBuilder

    package test; public class Test { public static void main(String[] args) { StringBuffer sb = new Str ...

  10. Warning: The following processes: -cmd.exe -java.exe are locking the following directory: