简单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. SpringBoot的HelloWorld 应用及解释

    参考链接: Spring Data JPA - Reference Documentation Spring Data JPA--参考文档 中文版 纯洁的微笑:http://www.ityouknow ...

  2. OAuth2.0学习（1-10）新浪开放平台微博认证-手机应用授权和refresh_token刷新access_token

    1.当你是使用微博官方移动SDK的移动应用时,授权返回access_token的同时,还会多返回一个refresh_token: JSON 1 2 3 4 5 6 {     "access ...

  3. 转：NLP+句法结构（三）︱中文句法结构（CIPS2016、依存句法、文法）

    NLP+句法结构(三)︱中文句法结构(CIPS2016.依存句法.文法)转自:https://www.cnblogs.com/maohai/p/6453389.html 摘录自:CIPS2016 中文 ...

  4. python、java实现二叉树，细说二叉树添加节点、深度优先（先序、中序、后续）遍历 、广度优先 遍历算法

    数据结构可以说是编程的内功心法,掌握好数据结构真的非常重要.目前基本上流行的数据结构都是c和c++版本的,我最近在学习python,尝试着用python实现了二叉树的基本操作.写下一篇博文,总结一下, ...

  5. jq中的表单验证插件------jquery.validate

    今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使 ...

  6. Spring（五）：Spring&Struts2&Hibernate整合后，实现查询Employee信息

    背景: 基于之前两篇文章<Spring(三):Spring整合Hibernate>.<Spring(四):Spring整合Hibernate,之后整合Struts2>,了解了如 ...

  7. [Kaggle] dogs-vs-cats之建立模型

    建立神经网络模型,下面要建立的模型如下: (上图来源:训练网络时,打开tensorboard即可观察网络结构,在下一节模型训练的时候会讲到) 下面为具体步骤: Step 0:导入相关库 import ...

  8. springMvc配置xml使ResponseBody返回Json

    @ResponseBody 在返回的数据不是html标签的页面,而是其他某种格式的数据时(如json.xml等)使用: 不在springMvc中配置json的处理的话,我们通常会在Controller ...

  9. snmp爆破(python脚本)

    snmp用来获取信息,然后利用获取的信息来进一步的渗透. 命令行有 snmpwalk -v 2c -c public ip system -c是密码,默认的密码是public 利用工具可以找windo ...

  10. [HNOI2016]最小公倍数

    题目描述 给定一张N个顶点M条边的无向图(顶点编号为1,2,...,n),每条边上带有权值.所有权值都可以分解成2a∗3b2^a*3^b2a∗3b 的形式. 现在有q个询问,每次询问给定四个参数u.v ...