//关于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. bzoj1022: [SHOI2008]小约翰的游戏John（博弈SG-nim游戏）

    1022: [SHOI2008]小约翰的游戏John 题目:传送门 题目大意: 一道反nim游戏,即给出n堆石子,每次可以取完任意一堆或一堆中的若干个(至少取1),最后一个取的LOSE  题解: 一道 ...

  2. linux 下的两种软件安装方式 —— 源码（编译、安装），编译好的二进制（直接安装）

    我们以 GPG(加密工具)为例来说明两种安装方式的区别: 源码(Source code releases,名称中则会含有src等说明信息,tarball:source),先编译再安装 GPU 的源码地 ...

  3. Linux就该这么学 20181003(第三章管道符)

    参考链接https://www.linuxprobe.com/ 输入输出重定向 标准输入重定向STDIN 文件描述符0 默认键盘输入 标准输出重定向STOUT 文件描述符1 默认输出到屏幕 错误输出重 ...

  4. POJ 1951 模拟

    思路: 坑爹模拟毁我一生 给两组数据: 输入: YOURE TRAVELING THROUGH ANOTHER DIMENSION A DIMENSION NOT OF SIGHT. 输出: YR T ...

  5. 三级联动（ajax同步）

    html <div id="frame"></div> js $(function(){ //拼接省市区下拉框 var str = `<select ...

  6. 你不知道的JavaScript（六）Box&Unbox

    很多语言中都有Box和Unbox的概念,很多书籍把Box翻译为"装箱操作",指的是將基本数据类型包装成对象:Unbox和它相反,把对象类型转换为基本类型. 我们知道JavaScri ...

  7. 005.ES2016新特性--装饰器

    装饰器在设计阶段可以对类和属性进行注释和修改,在Angular2中装饰器非常常用,可以用来定义组件.指令以及管道,并且可以与框架提供的依赖注入机制配合使用. 从本质上上讲,装饰器的最大作用是修改预定义 ...

  8. 优化长的switch语句

    突然想到之前碰到的一个优化的面试题,现在想想switch用的太傻 public enum FormatType { GetKey, GetValue } public class Format { p ...

  9. SGU 180 Inversions【树状数组】

    题意:求逆序数 和POJ那题求逆序数的一样,不过这题离散化之后,要去一下重,然后要开到long long #include<iostream> #include<cstdio> ...

  10. java 实现多线程 3种方式

    java实现多线程可以有以下三种方式: (1)继承Thread 类,重写其run()方法: (2)实现Runnable接口,实现其run() 方法: (3) 实现Callable 接口,重写call( ...