在使用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. 201671010449 杨天超 实验十四 团队项目评审&课程学习总结

    项目 内容 这个作业属于哪个课程 任课教师博客主页链接 这个作业的要求在哪里 作业链接地址 作业学习目标 1.掌握软件评审流程及内容 2.个人总结 实验一问题解答 实验一问题链接:https://ww ...

  2. Java Scanner语法

    1.导入: import java.util.Scanner; 2.创建对象 Scanner scan = new Scanner(System.in);//一般变量名为scan或者in 最后关闭,s ...

  3. 31 树莓派外接Oled屏幕

    http://shumeipai.nxez.com/2017/09/13/solve-the-raspberry-pi-drive-oled-problem.html

  4. VMware Workstation创建Windows2012server虚拟机

    镜像文件需要下载到物理机 3.需要输入iso文件 对应的密钥 定义普通的用户名与密码 4.指定按照路径 5. 大概都是下一步 根据提示需要重启 选择带GUI的服务器进行安装,因为windows命令行模 ...

  5. [RN] React Native Image 实现placeholder占位图

    React Native Image 实现placeholder占位图 react-native Image没有placeholder这样的props,但是业务有需要这种场景, 解决方法为: 使用Im ...

  6. python基础_格式化输出（%用法和format用法）(转载)

    python基础_格式化输出(%用法和format用法) 目录 %用法 format用法 %用法 1.整数的输出 %o -- oct 八进制%d -- dec 十进制%x -- hex 十六进制 &g ...

  7. Qt :编译警告 LNK4042对象被多次指定，已忽略多余的指定 ....segmentLayout.obj

    解决办法: 步骤: 1.将segmentLayout.h .segmentLayout.cpp 从工程中删除(no  permanently delete),并清理工程 2.在代码文件目录重命名seg ...

  8. 请教网友：#pragma pack(push) #pragma pack(pop)无效

    //try 一 try #pragma back(push) #pragma pack(2) struct E { char a; short b; double c; float d; char e ...

  9. 【IntelliJ IDEA学习之五】IntelliJ IDEA 搭建项目

    版本:IntelliJIDEA2018.1.4 一.同一窗口展示多个应用(弊端:耗内存) idea没有eclipse workspace的概念,如果想在同一窗口显示多个应用,可以按照如下方式来做:1. ...

  10. Swagger2.9.2进入API界面报NumberFormatException异常

    [转载请注明]: 原文出处:https://www.cnblogs.com/jstarseven/p/11778377.html     作者:jstarseven    码字挺辛苦的.....   ...