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

话不多说，上代码：

<body>

<input type="file" class="inputFile">

<img class="showImg" 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>

效果如图所示：

使用input的file进行上传进行预览的更多相关文章

  1. input type=file实现图片上传，预览以及图片删除

    背景 前两天在做一个PC网站的意见反馈,其中涉及到了图片上传功能,要求可以上传多张图片,并且支持图片上传预览及图片删除, 图片上传这一块以前没怎么搞过,而且一般也很少会碰到这样的需求,所以在做这个功能 ...

  2. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  3. input type="file"文件上传时得到文件的本地路劲

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name=& ...

  4. 一、简单的图片上传并预览功能input[file]

    一.简单的图片上传并预览功能input[file] <!DOCTYPE html> <html lang="en"> <head> <me ...

  5. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  6. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  9. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

随机推荐

  1. idea下新建Spring Boot项目并配置启动

    一.操作步骤 ①使用idea新建一个Spring Boot项目 ②修改pom.xml ③修改application.properties ④修改编写一个Hello Spring Boot的Contro ...

  2. 架构篇 | 带你轻松玩转 LAMP 网站架构平台（一）

    作者 | JackTian 微信公众号 | 杰哥的IT之旅(ID:Jake_Internet) 转载请联系授权(微信ID:Hc220066)备注:来自博客园 1.什么是 LAMP 架构? LAMP 架 ...

  3. JS常用关键字总结

    in: 案例1.遍历对象: for(key in obj) { console.info( key+":"+obj[key]; ) }; 案例2.判断对象中是否有属性: " ...

  4. 3-OpenResty 配置PHP

    由于咱以前是用PHP做的东西,又不想重新用 OpenResty自带的编写,所以呢咱设置下,可以像以前Apache那样访问PHP文件 首先去下载 PHP https://windows.php.net/ ...

  5. ESA2GJK1DH1K升级篇: IAP详解

    前言: 源码下载链接: https://gitee.com/yang456/STM32_IAP_Learn.git 后期所有出售的升级程序皆在此代码之上进行优化和开发 请必须把此文章各个的地方的说明看 ...

  6. 洛谷p2827蚯蚓题解

    题目 算法标签里的算法什么的都不会啊 什么二叉堆?? qbxt出去学习的时候讲的,一段时间之前做的,现在才写到博客上的 维护3个队列,队列1表示最开始的蚯蚓,队列2表示每一次被切的蚯蚓被分开的较长的那 ...

  7. gcd与exgcd

    gcd 辗转相除法求gcd证明 \(gcd(a, b) == gcd(b, a\%b)\) 证明: 设: \(d\)为\(a\)与\(b\)的一个公约数, 则有\(d|b\) \(d|a\) 设: \ ...

  8. RNN循环神经网络实现预测比特币价格过程详解

    http://c.biancheng.net/view/1950.html 本节将介绍如何利用 RNN 预测未来的比特币价格. 核心思想是过去观察到的价格时间序列为未来价格提供了一个很好的预估器.给定 ...

  9. iptables 常用处理动作

    在iptables中,-j 参数用来指定要进行的处理动作,常用的处理动作包括:ACCEPT.REJECT.DROP.REDIRECT.MASQUERADE.LOG.DNAT.SNAT.MIRROR.Q ...

  10. SpringData JPA实现增删改查

    application.properties配置 一.创建实体类并自动生成数据库表 二.dao层继承JpaRepository 三.controller中增加操作 结果: 删除操作: 修改操作: