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

Posted xiaoyaoxingchen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了input[type='file']获取上传文件路径案例相关的知识，希望对你有一定的参考价值。

最近在项目时，需要获取用户的上传文件的路径，便写了一个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']获取上传文件路径案例的主要内容，如果未能解决你的问题，请参考以下文章

input[type='file']样式美化及实现图片预览

vue使用input标签 type='file'上传文件

转：input['file'] 美化上传

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

前端实现input[type='file']上传图片预览效果

关于去除input type='file'改变组件的默认样式换成自己需要的样式的解决方案