在使用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. 预计阅读时间核心jS代码

    <script type="text/javascript"> jq(document).ready(function() { var read_time=jq(&qu ...

  2. turtle模块

    turtle(海龟)绘图用法 import turtle -->调出turtle库 setup()-->设置窗体大小和位置 turtle.setup(width,height,startx ...

  3. Struts CRUD

    Struts CRUD 利用struts完成增删改查 思路: 1.导入相关的pom依赖(struts.自定义标签库的依赖) 2.分页的tag类导入.z.tld.完成web.xml的配置 3.dao层去 ...

  4. IE与标准浏览器对事件处理的区别？（监听、阻止冒泡、阻止默认等）

    谷歌 IE:监听:addEventListener   attachEvent--------要在事件名称前面加on解绑:removeEventListener      detachEvent--- ...

  5. 动态规划：数字和为sum的方法数

    题目描述 给定一个有n个正整数的数组A和一个整数sum,求选择数组A中部分数字和为sum的方案数.当两种选取方案有一个数字的下标不一样,我们就认为是不同的组成方案. 输入描述: 输入为两行: 第一行为 ...

  6. [C++基础] 数组、指针、内存篇

    一.数组 2.1 int a[2][2]= { {1}, {2,3} },则 a[0][1] 的值是多少? 二维数组的初始化一般有两种方式: 第一种方式是按行来执行,如int array\[2][3] ...

  7. SVN与GIT工具使用对比

    版本工具 差异 svn git 系统特点 1.集中式版本控制系统(文档管理很方便) 2.企业内部并行集中开发 3.windows系统上开发推荐使用 4.克隆一个拥有将近一万个提交(commit),五个 ...

  8. QuantLib 金融计算——收益率曲线之构建曲线（4）

    [TOC] 如果未做特别说明,文中的程序都是 C++11 代码. QuantLib 金融计算--收益率曲线之构建曲线(4) 本文代码对应的 QuantLib 版本是 1.15.相关源代码可以在 Qua ...

  9. 2-3-4树（jdk8的TreeMap的红黑树）

    2-3树:插入变成2个节点正常插,变成3个节点就要提升中间节点和分裂子节点,满足:要么没有子节点,要么2个子节点,要么3个子节点. 2-3-4树:插入变成2个不动,插入变成3个不动,插入变成4个提升原 ...

  10. nginx返回file not found原因

    nginx返回file not found原因1 确实没有这个文件2 没有权限访问这个网站目录!!!