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

最新推荐文章于 2024-03-08 09:05:57 发布

qq_29069777

最新推荐文章于 2024-03-08 09:05:57 发布

阅读量8.5k

点赞数

分类专栏：前端文章标签： javascript input获取上传文件路径案例

原文链接：https://www.mk2048.com/blog/blog.php?id=h0kh1b0j1h1j&title=input%5Btype%3D%22file%22%5D%E8%8E%B7%E5%8F%96%E4%B8%8A%E4%BC%A0%E6%96%87%E4%BB%B6%E8%B7%AF%E5%BE%84%E6%A1%88%E4%BE%8B

版权

前端专栏收录该内容

1175 篇文章 1 订阅

订阅专栏

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

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

  <script>
    var input = document.getElementsByTagName("input")[0];
    console.log(input);
    input.onchange = function () {
      var that = this;
      console.log(that.files[0]);
      var src = window.URL.createObjectURL(that.files[0])
      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">
        <!-- 1.给input标签添加一个onchange事件：一旦选择文件发生变化则会触发   目的：获取选择图片的原始数据 -->
        <input type="file" id="exampleInputFile" name="icon" onchange=uploadImg(this)>

        <!-- 2.用一个img标签来接收文件数据  目的：（1）先接收文件数据  （2）通过offsetHeight属性获取宽高 -->
        <img src="" alt="" id="11111">
        <p>请上传图片.</p>
    </form>
</body>
<script>

    //选择图片，马上预览

    function uploadImg(obj) {

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

        var file = obj.files[0];

        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("11111");

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

            img.src = e.target.result;

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

            setTimeout(function(){

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

            },1000);
        }

        //3.开始读取
        reader.readAsDataURL(file)
    }
</script>
</html>

更多专业前端知识，请上【猿2048】www.mk2048.com

qq_29069777

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
input[type="file"]获取上传文件路径案例

最近在项目时，需要获取用户的上传文件的路径，便写了一个demo： <body> <input type="file" name="" value=""> <script> var i...
复制链接

扫一扫