<!DOCTYPE HTML>

 <html>

 <head>

     <meta charset="utf-8">

     <title>html5 图片上传预览</title>

     <style>

         #preview {

             width: 300px;

             height: 300px;

             overflow: hidden;

         }

         #preview img {

             width: %;

             height: %;

         }

     </style>

     <script src="../static/js/jquery-1.11.2.min.js"></script>

     <script type="text/javascript">

         //方法一

         function preview1(file) {

             var img = new Image(), url = img.src = URL.createObjectURL(file);

             var $img = $(img);

             img.onload = function() {

                 URL.revokeObjectURL(url);

                 $('#preview').empty().append($img)

             }

         }

         //方法二

         function preview2(file) {

             var reader = new FileReader();

             reader.onload = function(e) {

                 var $img = $('<img>').attr("src", e.target.result);

                 $('#preview').empty().append($img)

             };

             reader.readAsDataURL(file)

         }

         $(function() {

             $('[type=file]').change(function(e) {

                 var file = e.target.files[];

                 preview1(file);

                 //preview2(file)

             })

         })

     </script>

 </head>

 <body>

 <form enctype="multipart/form-data" action="" method="post">

     <input type="file" name="imageUpload"/>

     <div id="preview" style="width: 300px;height:300px;border:1px solid gray;"></div>

 </form>

 </body>

 </html>

html5 图片转base64预览显示的更多相关文章

  1. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  2. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  3. [javascript]——移动端 HTML5 图片上传预览和压缩

    在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个A ...

  4. HTML5图片上传预览

    HTML5实现图片的上传预览,需要使用FileReader对象. FileReader: The FileReader object lets web applications asynchronou ...

  5. html5 图片上传 预览

    <html><body><fieldset> <legend>测试</legend> <div class="form-gr ...

  6. Html5选择图片并及时预览图片

    以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览,使用Html5选择图片并及时预览图片的代码如下,使用起来更爽了. <!DOCTYPE html> <html l ...

  7. jQuery + ashx 实现图片按比例预览、异步上传及显示

    目录(?)[-] 注ajax 方式异步读取数据库显示图片的方法同上传一致使用 ashx 返回base64字符串在客户端处理即可 记录一个让我纠结良久的问题 在Page_Load 函数中只有第一个用 S ...

  8. 用html5文件api实现移动端图片上传&预览效果

    想要用h5在移动端实现图片上传&预览效果,首先要了解html5的文件api相关知识(所有api只列举本功能所需): 1.Blob对象  Blob表示原始二进制数据,Html5的file对象就继 ...

  9. FileUpload控件实现单按钮图片自动上传并带预览显示

    FileUpload控件实现单按钮图片自动上传并带预览显示 1.实现原理:   FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调 ...

随机推荐

  1. java面试常考题

    基础知识: 1.C++或Java中的异常处理机制的简单原理和应用. 当JAVA程序违反了JAVA的语义规则时,JAVA虚拟机就会将发生的错误表示为一个异常.违反语义规则包括2种情况.一种是JAVA类库 ...

  2. codeforces 336D. Vasily the Bear and Beautiful Strings 组合数学 dp

    题意: 给出n,m,g,求好串的个数 0 <= n,m <= 10^5,n + m >= 1,0 <= g <= 1 好串的定义: 1.只由0,1组成,并且恰好有n个0, ...

  3. Oracle 数据库中不同事务并发访问的问题

    现象 以SQL/Helper为例,打开不同的SQL窗口,对同一个表格进行操作,如下所示. 窗口1:当执行更新任务.紧接着执行查询时获得一组查询结果.结果是对的. 窗口2:而在另外一个SQL查询窗口中执 ...

  4. xhprof 安装使用

    1.安装扩展 windows下把 xhprof.dll 放到extensions目录下 修改配置文件 [xhprof] extension=xhprof.so; ; directory used by ...

  5. 在单线程中你最好使用ArrayList而不是Vector

    <java核心技术卷一>571页上提到Vector类的所有方法都是同步的.可以由两个线程安全地访问同一个Vector对象.显然,如果可以确定我们不会在多个线程中对这个数组进行操作的话,我们 ...

  6. wcf使用task实现异步调用

    private async void btnGetEmployees_Click(object sender, RoutedEventArgs e) { txtInfo.Text = "Da ...

  7. rails 配置使用mysql

    1 在gemfile中要添加 gem 'mysql2' 2 在mysql数据库中创建三个数据库 dept_dev dept_test dept_pro 3 配置文件 default: &def ...

  8. 协处理器CP15

    在基于ARM的嵌入式应用系统中,存储系统通常是通过系统控制协处理器CP15完成的.ARM处理器使用协处理器15(CP15)的寄存器来控制cache.TCM和存储器管理.CP15包含16个32位的寄存器 ...

  9. Informix SDK對比

    一.基本信息對比 表 1. Informix .NET Provider 和 IBM Data Server .NET Provider 的对比 特性 IBM Informix .NET Provid ...

  10. CentOS 6.5 安装 Nginx 1.7.8 教程

    http://blog.chinaunix.net/xmlrpc.php?r=blog/article&uid=29791971&id=4702007 Nginx是一款轻量级的Web ...