使用input的file进行上传进行预览

时间: 2019-06-11阅读: 32标签: 上传

在使用file上传文件的时候,想到了图片预览的功能,然后查询了一些资料,一种是需要后端配合,将数据变成base64或者buff等数据传给后端然后调取接口进行显示,但是这种需要后端的配合和网络请求,感觉不如在纯前端操作方便的多


代码:

<body>
<input type="file">
<img alt="show-img"/>
</body>
<script>
  //改变上传图片的路径以便本地可以进行使用
  function getFileURL(file) {
    let getUrl = null;
    if (window.createObjectURL !== undefined) { // basic
      getUrl = window.createObjectURL(file);
    } else if (window.URL !== undefined) { // mozilla(firefox)
      getUrl = window.URL.createObjectURL(file);
    } else if (window.webkitURL !== undefined) { // webkit or chrome
      getUrl = window.webkitURL.createObjectURL(file);
    }
    return getUrl;
  }

  let fileElement = document.querySelector(".inputFile");//获得file的dom;
  let imgElement = document.querySelector(".showImg");//获得img的dom
  fileElement.onchange = function () {
    let url = getFileURL(fileElement.files[0]);//吧当前的files[0]传递进函数
    imgElement.setAttribute("src", url);//设置图片的src
  };

</script>


fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全