在使用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. wordpress怎么用AMP加速器呢

    AMP项目(Accelerated Mobile Pages)是一个开放源代码计划,旨在为所有人打造更好的网络体验.借助该项目,用户可以打造出在各种设备和分发平台上都能始终如一地快速加载且效果出色的精 ...

  2. Module build failed: Error: Cannot find module 'node-sass'

    安装npm 遇到 Module build failed: Error: Cannot find module 'node-sass' 这次通过重装 npm 完成 先卸载npm npm uninsta ...

  3. CAJViewer 去除右上角闪动的图标

    打开CMD,粘贴如下代码: %homedrive% cd "%userprofile%\Documents\My eBooks\" del ad0.xml md ad0.xml m ...

  4. [冬令营Day1 T2]sequence

    题目描述 Description 给一个长度为N的序列以及Q的询问,每次两个参数l,r,问你序列[l,r]中的最大连续和 输入描述 Input Description 一行二个正整数N,Q. 接下来一 ...

  5. dfs的两种处理方法

    方法一: 对于源点s,初始化vis[s]=1,并且在dfs之后vis[s]=1,为下一次调用做准备 .对于dfs递归中的寻找后继的循环体,入栈出栈语句写在循环内. 模板: //调用 vis[s]=; ...

  6. PATA1082Read Number in Chinese

    有几点需要注意的地方一是将right转化为与left在在同一节 while (left + 4 <= right) { right -= 4;//每次将right移动4位,直到left与righ ...

  7. Windows快速批量删除大量文件的命令

    命令分别如下: rmdir [drive:]path [/S] [/Q] del [drive:]path [/S] [/Q] 其中rmdir 与rd命令相同. /S 表示除目录本身外,还将删除指定目 ...

  8. UDF——输出网格节点坐标

    需要在VS当中进行编译,具体内容可参看前面 <在Visual Studio中直接编译Fluent的UDF的总结(串行)> <在Visual Studio中直接编译Fluent的UDF ...

  9. Comet OJ - Contest #1 C 复读游戏（状态压缩）

    题意 https://www.cometoj.com/contest/35/problem/C?problem_id=1498 思路 这题要用到一种比较小众的状压方法(没见过的话可能一时比较难想到). ...

  10. Java 集合系列之三：Set基本操作

    1. Java Set 1. Java Set 重要观点 Java Set接口是Java Collections Framework的成员. Set不允许出现重复元素-----------无重复 Se ...