//关于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. java中log日志的使用（完全版）

    Commons_logging包 Apache通用日志包 他为Log4JLogger:NoOpLog:LogKitLogger:Jdk14Logger:AvalonLogger提供了一共通用的接口进行 ...

  2. 一个比NPM更快更安全可靠的JavaScript包管理工具——Yarn

    yarn安装: npm intall -g yarn 查看安装是否成功: yarn -v yarn常用的命令以及和npm的对照如下: 更详细的请查看官方文档

  3. 【参考】IBM sun.io.MalformedInputException and text encoding conversions transforms numerals to their word equivalents - United States

    Problem(Abstract) When converting contents from a file or string using WebSphere Application Server, ...

  4. [转] CentOS 7 为firewalld添加开放端口及相关资料

    转自http://www.cnblogs.com/hubing/p/6058932.html 1.运行.停止.禁用firewalld 启动:# systemctl start  firewalld 查 ...

  5. webkit Safari的样式库

    1,webkit Box模型 CSS定义:-webkit-border-bottom-left-radius: radius; CSS定义:-webkit-border-top-left-radius ...

  6. Web前端为什么这么火爆？

    Web前端为什么这么火爆? 互联网发展到今天,全球已有28.9亿互联网用户,中国有355万网站,6.5亿网民,13亿手机用户,5亿微信用户,当步入互联网+时代后,互联网已经越来越复杂,纷繁复杂的互联网 ...

  7. CentOS7-1810 系统DNS服务器BIND软件配置说明

    DNS的出现的历史 网络出现的早期是使用IP地址通讯的,那时就几台主机通讯.但是随着接入网络主机的增多,这种数字标识的地址非常不便于记忆,UNIX上就出现了建立一个叫做hosts的文件(Linux和W ...

  8. confluence6.0.3安装文档

    一.Atlassian Confluence 6.0.3安装文档包含内容 1.wiki的安装步骤: 2.旧系统迁移中碰到的无法编辑和问题和解决方案: 3.wiki源码安装包.连接mysql用的jar包 ...

  9. django-数据库的查询集

    1.curd(增删改查) 对于数据库,作为一名开发人员并不会感到陌生,那么数据库中的查询集是怎么一回事呢? 2.数据库的查询集 查询集这个概念存在django框架中,存在于ORM(object rel ...

  10. UVA-10003 Cutting Sticks 动态规划 找分界点k的动规

    题目链接:https://cn.vjudge.net/problem/UVA-10003 题意 有根棍子,上面有些分割点(n<50),每次按分割点切割棍子时,费用为当前棍子的长度. 问有什么样的 ...