input[type='file']获取上传文件路径案例

最近在项目时，需要获取用户的上传文件的路径，便写了一个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>