在使用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. java Atomic compareAndSet部分原理分析

    以AtomicLong的compareAndSet方法举例.先说结论:如果CPU支持,则基于CPU指令(CMPXCHG8)实现:否则使用ObjectLocker锁实现. 分析过程如下: 该方法在jdk ...

  2. JZOJ3492数数&&GDOI2018超级异或绵羊——位&&类欧几里得

    JZOJ3492 数数(count) 我们知道,一个等差数列可以用三个数A,B,N表示成如下形式:  B+A,B+2A,B+3A⋯B+NA ztxz16想知道对于一个给定的等差数列,把其中每一项用二进 ...

  3. 移动端适配（rem & viewport）--移动端开发整理笔记（四）

    移动端适配 通过rem适配 em: 根据元素自身的字体大小来计算自己的尺寸 rem: (root em) 根据根节点(html)的字体大小来计算自己的尺寸   我们知道,在不同的手机设备,分辨率大小是 ...

  4. 1. vue 的安装

    兼容性 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性.但它支持所有兼容 ECMAScript 5 的浏览器. 安装: 1.直接用 < ...

  5. v2.3.0

    v2.3.1 大版本2,小版本3,fixbug 1

  6. React 积累

    1. Fragment 标签 使用介绍:因React要求每个组件都需要一个大的外层包裹起来才可以,否则报错,如果你并不想组件外层由一个大大外层包裹,则可以使用Fragment 标签 代码示例: imp ...

  7. 基于web公交查询系统---站点信息管理

    界面设计: 界面设计代码获取: 搭建好框架获取信息: 核心代码: var users = [ ];//获取到的bus所有站点信息 var rowIndex = -1; $.ajax({ url: &q ...

  8. git bash 乱码问题之解决方案

    解决办法:右击左上方git标识,然后进入到如图中,点击Text,进行操作. 操作完毕后,关闭git bash,然后再重新打开,执行ls或ll命令,查看对应的以中文作为目录或文件名是否显示乱码,如果之前 ...

  9. 基于ZYNQ的uart传输任意长度的数据

    1.参考 UG585 网络笔记 参考:ZYNQ进阶之路14–PS端uart串口接收不定长数据 2.理论知识 参见上一次实验:基于ZYNQ 的UART中断实验之串口写数据到DDR3中 3.实验目的 基于 ...

  10. Haskell-chp01

    -- 函数名首字母必须小写,可以包含 '来表示该函数严格求值版本(与惰性求值相对) doubleMe x = x + x doubleUs x y = doubleMe x + doubleMe y ...