简单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. gradle入门（1-6）将Java项目从maven迁移到gradle

    gradle项目与maven项目相互转化(转) 转自: http://www.cnblogs.com/yjmyzz/p/gradle-to-maven.html 一.maven项目->gradl ...

  2. Spark入门（1-3）Spark的重要概念

    1.什么是弹性分布式数据集? Spark提出了RDD(Resilient Distributed Datasets)这么一个全新的概念,RDD弹性分布式数据集是并行.容错的分布式数据结构:可以将RDD ...

  3. C#程序编写规范

    代码书写规则 1.尽量使用接口,然后使用类实现接口,提高程序的灵活性. 2.一行不要超过80个字符. 3.尽量不要手工更改计算机生成的代码,若必须要改,一定要改为和计算机生成的代码风格一样. 4.关键 ...

  4. KNN算法简单应用

    这里是写给小白看的,大牛路过勿喷. 1 KNN算法简介 KNN(K-Nearest Neighbor)工作原理:存在一个样本数据集合,也称为训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集 ...

  5. Mysql中autocommit的用法

    定义 Mysql文档原文:SET autocommit disables or enables the default autocommit mode for the current session. ...

  6. Modelsim的使用——复杂的仿真

    相对于简单的仿真,复杂的仿真是指由多个文件.甚至调用了IP核.使用tcl脚本进行的仿真.其实仿真步骤跟图形化的差不多,只不过每一步用脚本写好,然后再在软件里面run一下,主要过程就是: 1.准备好各种 ...

  7. Windows10下的docker安装与入门 （三） 创建自己的docker镜像并且在容器中运行它

    Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱机制,相互之间不会有任何 ...

  8. view-xpath

    https://addons.mozilla.org/en-US/firefox/ WebDriver Element Locator

  9. urllib.parse

    1 url分解 import urllib.parse result = urllib.parse.urlparse('http://www.baidu.com') print(result) 结果为 ...

  10. Entry的验证

    Entry组件是支持验证输入的合法性的, 比如要求输入数字,你输入了字母就是非法. 实现该功能,需要通过设置validate,validatecommand,invalidcommand选项. 1.首 ...