//关于FileReader对象  http://blog.csdn.net/zk437092645/article/details/8745647
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        //设置图片上传后预览的div样式
        <style type="text/css">
             #preview,
             .img,
             img {
               width: 200px;
               height: 200px;
             }

             #preview {
               border: 1px solid #000;
             }
        </style>
    </head>
    <body>
        <div id="preview"></div>
        <input type="file" onchange="preview(this)"/>
        //图片上传和预览
        <script type="text/javascript">
          function preview(file) {
              var prevDiv = document.getElementById('preview');

              if (file.files && file.files[0]) {
                var reader = new FileReader();

                reader.onload = function(evt) {
                  prevDiv.innerHTML = ' <img src="' + evt.target.result + '" /> ';
                }

                reader.readAsDataURL(file.files[0]);

              } else {

                prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"><div>';

              }
            }
        </script>
    </body>
</html>

js实现图片上传后即时预览的更多相关文章

  1. 分离与继承的思想实现图片上传后的预览功能：ImageUploadView

    本文要介绍的是网页中常见的图片上传后直接在页面生成小图预览的实现思路,考虑到该功能有一定的适用性,于是把相关的逻辑封装成了一个ImageUploadView组件,实际使用效果可查看下一段的git效果图 ...

  2. JS实现图片上传之前先预览

    <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat=&quo ...

  3. java多图片上传--前端实现预览--图片压缩 、图片缩放，区域裁剪，水印，旋转，保持比例。

    java多图片上传--前端实现预览 前端代码: https://pan.baidu.com/s/1cqKbmjBSXOhFX4HR1XGkyQ 解压后: java后台: <!--文件上传--&g ...

  4. web 图片上传实现本地预览

    在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...

  5. jsp+springmvc实现文件上传、图片上传和及时预览图片

    1.多文件上传:http://blog.csdn.net/a1314517love/article/details/24183273 2.单文件上传的简单示例:http://blog.csdn.net ...

  6. 基于Jcrop的图片上传裁剪加预览

    最近自己没事的时候研究了下图片上传,发现之前写的是有bug的,这里自己重新写了一个! 1.页面结构 <!DOCTYPE html> <html lang="en" ...

  7. jquery实现图片上传前本地预览

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...

  8. 图片上传前的预览（PHP）

    1.先创建一个file表单域,我们需要用它来浏览本地文件.<form name="form1" id="form1" method="post& ...

  9. file图片上传之前先预览

    链接:https://www.cnblogs.com/tandaxia/p/5125275.html 记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<inp ...

随机推荐

  1. [Codeforces 911F] Tree Destruction 解题报告（贪心）

    题目链接: http://codeforces.com/contest/911/problem/F 题目大意: 给你一棵树,每次挑选这棵树的两个度数为1的点,加上他们之间的边数(距离),然后将其中一个 ...

  2. vue2 filter过滤器的使用

    本章主要讲vue2的过滤器的使用 1.先介绍下vue1与vue2的filter区别,也就是vue2更新的地方 a: 2.0将1.0所有自带的过滤器都删除了,也就是说,在2.0中,要使用过滤器,则需要我 ...

  3. python 3.x 学习笔记12 (反射 and 异常)

    1.反射通过字符串映射或修改程序运行时的状态.属性.方法 getattr(obj,name_str):  根据字符串name_str去获取obj对象里的对应的方法的内存地址 hasttr(obj,na ...

  4. AOJ GRL_1_A: Single Source Shortest Path （Dijktra算法求单源最短路径，邻接表）

    题目链接:http://judge.u-aizu.ac.jp/onlinejudge/description.jsp?id=GRL_1_A Single Source Shortest Path In ...

  5. dl learn task

    https://deeplearning4j.org/cn/word2vec Task 1 分类http://blog.csdn.net/czs1130/article/details/7071734 ...

  6. STM8S汇编代码分析

    转载:http://blog.csdn.net/u010093140/article/details/50021897使用STVD建立完汇编工程项目之后(具本建立方法可以看我的另一篇博文http:// ...

  7. oracle数据库的关闭

    数据库停止: shutdown normal 无新连接 等待当前会话结束 等待当前事务结束 强制检查点并关闭文件(一致性关闭) shutdown transactional 无新连接 结束当前会话 等 ...

  8. JS脚本代替人工输入

    最近接到了个任务,对某个网页上的1000个item填写相同的text,text的内容相同. 这显然是机械动作呀,干脆写个工具,用脚本代替人工操作. 浏览器按F12,找到console,输入写好的脚本, ...

  9. sql 技巧

    1.想把一张表的 某个字段或多个字段 的 所有数据 复制到另外一张表里  insert into 表名(字段) select (字段) from 表名 2.from Users u , IN(u.ro ...

  10. enterprise architect (EA) 源码生成UML类图，帮助理解项目工程

    用VS看大型工程代码,尤其是很多层类的,很容易头晕,即便是装了visual assist 插件.用VS生成类图吧,只能生成一堆框,只有一些小的类关系有箭头表示.远远不能满足要求.下面介绍建模工具EA来 ...