简单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. C#微信公众号——自定义菜单

    自定义菜单最多包括3个一级菜单,每个一级菜单最多包含5个二级菜单.一级菜单最多4个汉字,二级菜单最多7个汉字,多出来的部分将会以“...”代替.自定义菜单的介绍,可以看官方开发文档http://mp. ...

  2. python网络编程基础（一）

    一.C/S架构 客户端/服务端架构 二.OSI七层架构 七层模型,亦称OSI(Open System Interconnection)参考模型,是参考模型是国际标准化组织(ISO)制定的一个用于计算机 ...

  3. POJ-3723 Conscription---最大权森林---最小生成树

    题目链接: https://vjudge.net/problem/POJ-3723 题目大意: 需要征募女兵N人, 男兵M人. 每征募一个人需要花费10000美元. 带式如果已经征募的人中有一些关系亲 ...

  4. POJ-2349 Arctic Network---MST的第m长的边

    题目链接: https://vjudge.net/problem/POJ-2349 题目大意: 要在n个节点之间建立通信网络,其中m个节点可以用卫星直接连接,剩下的节点都要用线路连接,求剩下这些线路中 ...

  5. Text-查找文本

    from tkinter import * master=Tk() text=Text(master,width=30,height=5) text.pack() text.insert(INSERT ...

  6. C# GetValue 正则获取开始结束代码

    /// <summary> /// 获得字符串中开始和结束字符串中间得值 /// </summary> /// <param name="str"&g ...

  7. 定点分析： MySQL InnoDB是如何保证系统异常断电情况下的数据可靠性？

    MySQL支持事务,所以保证数据可靠的前提是对数据的修改事务已经成功提交 这个问题可以解释为'MySQL InnoDB是如何保证事务C(一致性)D(持久性)性的?' 可能出现的两种情况: (一致性)数 ...

  8. Java爬虫原理分析

    当我们需要从网络上获取资源的时候,我们一般的做法就是通过浏览器打开某个网站,然后将我们需要的东西下载或者保存下来. 但是,当我们需要大量下载的时候,这个时候通过人工一个个的去点击下载,就显得太没有效率 ...

  9. 伊布(ib)

    [问题描述]ib 被困在了一个美术馆里,她需要收集美术馆内的每种颜料才能获得逃出美术馆的钥匙美术馆由 n*m 的房间构成,每个房间里有一种颜料,解锁进入后就可以收集.有的房间不能解锁,如果解锁的话会直 ...

  10. [ZJOI2006]超级麻将

    题目描述 很多人都知道玩麻将,当然也有人不知道,呵呵,不要紧,我在这里简要地介绍一下麻将规则: 普通麻将有砣.索.万三种类型的牌,每种牌有1~9个数字,其中相同的牌每个有四张,例如1砣~9砣,1索~9 ...