//关于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. web.xml配置详解（转载）

    一.web.xml配置文件常用元素及其意义预览 1 <web-app> 2 3 <!--定义了WEB应用的名字--> 4 <display-name></di ...

  2. PowerDesigner 16.5 安装及破解步骤

     安装: 1.双击运行PowerDesigner16.5_Evaluation.exe,进入安装界面,点击(Next)下一步按钮: 2.下拉菜单选择HongKong,选中 I agree to the ...

  3. C# HttpHelper万能框架实现 接口

    POST请请求是使用Http协议与请求的URL进行连接,然后再写入数据,最后关闭连接的过程 方法(1) //要Post的数据 string postdate = "a=123&c=4 ...

  4. PHP mysql_fetch_array得不到数据

    好久没写PHP了...为了数据库课设开始了PHP速成之旅... 光是简单的注册功能就坑了我好几个小时,不过万事开头难嘛...之后应该会快起来的. 先说一下昨天遇到的小坑, 我的表单是这么写的 < ...

  5. Java框架之spring—jdbcTemplate

    JdbcTemplate 今天我们利用 springIOC 写一个 JdbcTemplate 来实现一个表的简单的增删改查 步骤如下: 首先创建数据库,创建一个学生表 student (id,name ...

  6. SQL之子查询

    子查询概念:把一个查询的结果在另一个查询中使用就叫做子查询 1.子查询作为条件时 当我们使用子查询作为条件时,若子查询返回值为多个,则会报以下错误: "子查询返回的值不止一个.当子查询跟随在 ...

  7. 一个php处理图片裁剪，压缩，水印的小代码

    插件地址:https://github.com/cigua/imagefilter

  8. Description Resource Path Location Type Cannot change version of project fac(导入maven项目出现红叉问题)

    项目现象如下: 这是由于你的 Maven 编译级别是 jdk太低了 解决方法: 1.在eclipse的工程上选择属性,在选择Project Facets里面中选择Dynamic web Module, ...

  9. 模块 –OS & OS.PATH

    模块-Os模块: os.getcwd() 获取当前工作目录,即当前python脚本工作的目录路径 In [25]: os.getcwd() Out[25]: 'C:\\Users\\***' os.c ...

  10. 【xsy2440】【GDOI2016】疯狂动物城

    感受一下这恐怖的题目长度~~~ 其实题意很裸,但是作为GDOI的一道防AK题,自然有他优秀的地方. 简化题意:给出一棵树,要求支持三个操作: 1.修改点值 2.询问点$x$到$y$之间的一些东东 3. ...