<body>

    <input type="file" id="file_input" onchange="show_image()" />

    <img src="" alt="" id="show_img" width="100px" height="100px" style="display: none;" />

</body>

<script>

    function show_image() {

        //首先获取到文件输入框和img元素

        file_input = document.getElementById("file_input");

        show_img = document.getElementById("show_img");

        //创建URL对象

        show_img.src = window.URL.createObjectURL(file_input.files[0]);

        //显示图片

        show_img.style.display = 'block';

    }

</script>

总结一下，就是使用window.URL.createObjectURL()方法使用文件域中的文件创建一个URL对象赋值给img的src属性，即时在网页中显示出来

JavaScript实现上传图片预览[js前端实现]的更多相关文章

  1. 上传图片预览JS脚本 Input file图片预览的实现示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 一段上传图片预览JS脚本,Input file图片预览的实现

    在深圳做项目的时候,需要一个用户上传头像预览的功能!是在网上找了好多,都不太满意.要么是flash的,要么是Ajax上传后返回图片路径的,要么压根就是不能用的.幸运的是在这个项目以前有人写过一个图片预 ...

  3. js兼容火狐显示上传图片预览效果

    js兼容火狐显示上传图片预览效果[谷歌也适用] <!doctype html> <html> <head> <meta content="text/ ...

  4. JS 上传图片 + 预览功能（一）

    JS 上传图片 + 预览功能 <body> <input type="file" id="fileimg1" style="disp ...

  5. jquery实现上传图片预览(需要浏览器支持html5)

    jquery实现上传图片预览(需要浏览器支持html5) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  6. HTML5上传图片预览功能

    HTML5上传图片预览功能 HTML代码如下: <!-- date: 2018-04-27 14:41:35 author: 王召波 descride: HTML5上传图片预览功能 --> ...

  7. HTML5上传图片预览

    <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> <meta http ...

  8. 去除ckeditor上传图片预览中的英文字母

    去除ckeditor上传图片预览中的英文字母 CKEDITOR.replace('text', { filebrowserImageUploadUrl : 'upload_img.do', langu ...

  9. 通过HTML5 FileReader实现上传图片预览功能

    原文:http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201706224590.html 在上传图片到服务器之前,我们希望可以预览一下要上传的图片. ...

随机推荐

  1. 设计模式（1）单例模式（Singleton）

    设计模式(0)简单工厂模式 源码地址 0 单例模式简介 0.0 单例模式定义 单例模式是GOF二十三中经典设计模式的简单常用的一种设计模式,单例模式的基本结构需满足以下要求. 单例模式的核心结构只有一 ...

  2. Lambda表达式随笔

    1.Lambda表达式是一个匿名函数,其本质其实还是一个函数,因此任何一个Lambda表达式都可以以其它的方式通过普通的函数实现或者代替. 2.Lambda表达式云算符:=>,该运算符读为&qu ...

  3. Linux 系统管理06--磁盘管理

    Linux系统管理06——磁盘管理 一.磁盘结构 1.硬盘的物理结构 盘片:硬盘有多个盘片,每个盘片2面 磁头:每面一个磁头 2.硬盘的数据结构 扇区:盘片被分为多个扇形区域,每个扇形区存放512字节 ...

  4. VMware Ubuntu 安装

    最近对Linux系统有兴趣,本想装个双系统,考虑自己是以Windows为主,所以装了个虚拟机 VMware Workstation 12 Pro 版Ubuntu镜源文件下载地址:https://www ...

  5. Sublime 3 如何使用列编辑模式

    前言 作为一名运维人员,文本IDE的列编辑模式对工作效率的提升很大.以前总用UE,觉得UE的列编辑模式设置很人性化(alt+c).后来接触了sublime,个人觉得它的列编辑模式使用对比UE略有差距. ...

  6. 我对RPC的理解

    1.简介 这篇文章将会用最直白的方式介绍RPC,以及实现RPC客户端的Ajax跨域调用的例子. RPC(Remote Procedure Call Protocol)--远程过程调用协议,它是一种通过 ...

  7. 如何利用动态URL提升SEO及处理业务逻辑

    如果你正在建设一个新网站或者对现有网站重新设计,我们认为应该将网站的 URL 转换为用户友好的 URL,或搜索引擎友好的 URL,这类 URL 也称为语义 URL(Semantic URL).哪些UR ...

  8. 适配器模式（Adpater Pattern）

    适配器模式把一个类的接口变换成客户端所期待的另一种接口,从而使原本因接口不匹配而无法在一起工作的两个类能够在一起工作. 适配器模式的用途 用电器做例子,笔记本电脑的插头一般都是三相的,即除了阳极.阴极 ...

  9. SharePoint Application Page启用匿名访问

    现在的项目需要使用sharepoint application page来展示图片影像,并让其它应用系统匿名访问,经过一番认真研究,主要有下面的步骤: 1. 在web applicaiton leve ...

  10. o(n)线性排序算法

    O(n) 排序算法 前言 前面有总结过各类常用的排序算法,但是那些排序算法最优的时间复杂度是O(nlogn),所以我要介绍三种时间复杂度为O(n)的线性时间复杂度的排序算法. 计数排序 计数排序利用了 ...