简单javascript代码 实现上传图片预览

<body>

    <!-- 设置当有图片准备上传时触发javascript代码-->

     <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() {

        //抓取到上传图片的input标签的信息

         file_input = document.getElementById("file_input");

        //抓取到需要展示预览图的img标签信息

         show_img = document.getElementById("show_img");

        //回去预览图的src属性信息

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

        //改变style属性中block的值

         show_img.style.display = 'block';

     }

</script>

javascript实现图片的预览的更多相关文章

  1. JavaScript实现图片裁剪预览效果~（第一个小玩具）

    感觉开始学习的前一个月真的太不珍惜慕课网的资源了  上面蛮多小玩意真的蛮适合我这样刚入门JavaScript的同学加深使用理解 大概收藏了百来门或大或小的课程  有一个感觉就是学这个真的比光是看书看概 ...

  2. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

  3. js实现FileUpload选择图片后预览功能

    当asp.net的FileUpload选择一个图片后不需要上传就能显示出图片的预览功能, 代码: <%@ Page Language="C#" AutoEventWireup ...

  4. node.js平台下，cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  5. iOS HTML图片本地预览

    引言 相信用过苹果手机的童鞋,会发现很多新闻类的应用,都可以实现HTML图片本地预览,那么这是如何实现的呢?本文将深入阐述其中的原理. 关于此功能,我还实现了一个DEMO,大家可以点击此访问更详细内容 ...

  6. JS实现图片base64转blob对象，压缩图片，预览图片，图片旋转到正确角度

    base64转blob对象 /** 将base64转换为文件对象 * @param {String} base64 base64字符串 * */ var convertBase64ToBlob = f ...

  7. cropper.js实现图片裁剪预览并转换为base64发送至服务端。

    一 .准备工作 1.首先需要先下载cropper,常规使用npm,进入项目路径后执行以下命令: npm install cropper 2. cropper基于jquery,在此不要忘记引入jq,同时 ...

  8. Android 举例说明自己的定义Camera图片和预览，以及前后摄像头切换

    如何调用本地图片,并调用系统拍摄的图像上一博文解释(http://blog.csdn.net/a123demi/article/details/40003695)的功能. 而本博文将通过实例实现自己定 ...

  9. 图片本地预览 flash html5

    dataURI 一种能够在页面嵌入外部资源的URI方案.能够降低图片或者样式表的http请求数量,提高效率. ie8把dataURI 的属性值限制在32k以内. 图片本地预览: 由于安全原因,通过fi ...

随机推荐

  1. Android P专区免费开放 -- 同样的Android，不同的体验

    2018年3月8日,Google推出了Android P Preview版本,并提供官方镜像下载. 为了让广大开发者能够及时了解Android P的新功能特性,提前为您的app进行良好适配,WeTes ...

  2. IDE-Ecplise-代码注释 模版 编码规范 配色

    说明: 代码注释主要用于方便代码后期维护,编码规范,增加代码阅读性和维护性.因网上看到的很多博客中片段局多,故整理后重写一篇,方便交流学习. 先看下加过注释模版后的效果. 如上图所示,创建类,方法和继 ...

  3. python/Djangof分页与自定义分页

    python/Djangof分页与自定义分页 Django分页 ##============================================分页==================== ...

  4. GNU/Linux需要特别注意的目录

    /bin         存放大多数系统命令,如cat.mkdir.mv.cp.tar.chmod等 /boot       存放开机所需要的文件,开机时载入开机管理程序(bootloader),并映 ...

  5. uvalive 3602 DNA Consensus String

    https://vjudge.net/problem/UVALive-3602 题意: 给定m个长度均为n的DNA序列,求一个DNA序列,使得它到所有的DNA序列的汉明距离最短,若有多个解则输出字典序 ...

  6. iconfont字体图标和各种CSS小图标

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! iconfont字体图标 我们的需求中,很多时候会看到一些小的图形,或者叫图标,比如天猫网站中:     ...

  7. SQL Server 2008 R2 安装注意事项

    上个星期自己第一次安装SQL Server 2008 R2,安装失败几次,结果用了将近1天的时间安装,最后成功了. 心得:1.安装SQL Server 2008 R2时,最好在第一次就安装成功.在百度 ...

  8. c#之文件操作（学习笔记）

    File类和Directory类 FileInfo类 需要提供一个文件路径来创建一个FileInfo类实例对象,FileInfo提供很多类似File的方法,在选择使用File还是FileInfo时应遵 ...

  9. 将 Net 项目升级 Core项目经验：（二）修复迁移后Net Standard项目中的错误

    修复迁移后Net Standard项目中的错误 接上一章,项目编译结果如下: 解决依赖dll引用 在Net Framework项目的引用如下: 各引用和作用: log4net(1.10.0.0) 用于 ...

  10. (MariaDB/MySQL)MyISAM存储引擎读、写操作的优先级

    MariaDB/MySQL中使用表级锁的存储引擎(例如MyISAM.Aria(MariaDB对MyISAM引擎的改进,前身是MyISAM))在读(select).写操作(insert.delete.u ...