<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. cookie和session的区别异同

    1.用于保存页面信息:如自动登录,记住用户名 2.对于同一个网站只有一套cookie,它是以域名为单位的,一个域名就是一套,数量大小有限4k-10k,同时会具有过期时间 3.JS中通过document ...

  2. clamav 杀毒软件安装及使用配置

    安装clamav 之前还需要安装zlib 要不然安装过程中会报错的. tar -zxvf  zlib-1.2.3.tar.gz cd zlib-1.2.3 ./configure make make ...

  3. 纯原生javascript实现分页效果

    随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱. 最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下 functi ...

  4. 本学期微分方程数值解课程总结（matlab代码）

    最简单求解一个微分方程数值解得方法:Euler法 function [x,y]=Euler_method(dufun,span,h,x0,y0) %EuLer格式, %求解方程y'=dufun(x,y ...

  5. 统计学习方法：罗杰斯特回归及Tensorflow入门

    作者:桂. 时间:2017-04-21  21:11:23 链接:http://www.cnblogs.com/xingshansi/p/6743780.html 前言 看到最近大家都在用Tensor ...

  6. [Git]06 如何提交空目录

     git和 svn不同,仅仅跟踪文件的变动,不跟踪目录.所以,一个空目录,如果里面没有文件,即便 git add 这个目录,另外在别处 check out 的时候,是没有这个空目录的. 只跟踪文件 ...

  7. sql关键字之null

    在数据库中使用一种特殊的值表示未知的值--NULL,我们称之为空值但并不是空的字符串,而是特殊的值.

  8. android在myeclipse上创建的项目各种报错

    这几天被android弄得头疼死了.差不多把电脑弄了个遍. 先是离线安装ADT,下载ADT,然后配置,但是因为ADT与MyEclipse冲突.所以直接不要再myeclipse下弄Android的环境了 ...

  9. javascript原生方法实现extend

    var extend = (function () { for(var p in {toString:null}){ //检查当前浏览器是否支持forin循环去遍历出一个不可枚举的属性,比如toStr ...

  10. USACO section 1.1 C++题解

    USACO section1.1:DONE 2017.03.03 TEXT Submitting Solutions DONE 2017.03.04 PROB Your Ride Is Here [A ...