最近在项目时，需要获取用户的上传文件的路径，便写了一个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. 【Oracle】glogin.sql脚本模板

    [root@localhost ~]# su - oracle [oracle@localhost ~]$ vi $ORACLE_HOME/sqlplus/admin/glogin.sql defin ...

  2. UNIX网络编程（转载）

    1.1 客户端程序和服务端程序 网络程序和普通的程序有一个最大的区别是网络程序是由两个部分组成的--客户端和服务器端. 网络程序是先有服务器程序启动,等待客户端的程序运行并建立连接.一般的来说是服务端 ...

  3. Win7系统无法记住网络访问的凭据怎么办？

    访问内网其他IP时已经打勾记住我的凭据了,但是注销或者重启Win7系统之后,又得重新输入用户名跟密码怎么办? 下面就为大家介绍一下如何让Win7系统记住网络访问的凭据. 以上问题还会引发,重启后无法正 ...

  4. IOS:兼容ios6和低版本

    viewDidUnload在ios6开始被弃用了,所以我们在这里处理内存警告的这类问题,这个时候我们就要把相应的处理放在 didReceiveMemoryWarning中. - (void)didRe ...

  5. Project Euler 13 Large sum

    题意:计算出以下一百个50位数的和的前十位数字. /************************************************************************* ...

  6. Spring MVC 的概念1

    ---恢复内容开始--- SpringMVC是一个采用模型----视图------控制器(MVC)的WEb框架建立在中央前端控制器的 Servlet(DispatcherServlet),他负责发送每 ...

  7. 通过腾讯地图api获取用户位置限制在指定位置区域

    <!--在微信中获取用户位置--><script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js">& ...

  8. Jquery学习总结（5）——jQuery选择器

    1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签</p> <p id="not">这 ...

  9. HDU2147 kiki's game

    /* HDU2147 kiki's game 博弈论 巴什博奕 http://acm.hdu.edu.cn/showproblem.php?pid=2147 题意:在一个n×m的棋盘上,初始棋子放在右 ...

  10. Weblogic常用监控指标

    http://blog.csdn.net/konglongaa/article/details/53897562