<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<meta name="author" content="EdieLei" />
<title>HTML5 图片上传预览</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    $('#img').change(function(){
];    //选择上传的文件
        var r = new FileReader();
        r.readAsDataURL(file);    //Base64
        $(r).load(function(){
            $('div').html('<img src="'+ this.result +'" alt="" />');
        });
    });
});
</script>
</head>
<body>
<h3>HTML5 图片上传预览</h3>
<input id="img" type="file" accept="image/*" /><br />
<div></div>
</body>
</html>

HTML5 图片上传预览的更多相关文章

  1. HTML5图片上传预览

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

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

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

  3. html5 图片上传 预览

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

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

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

  5. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  6. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  7. html 图片上传预览

    Html5 upload img 2012年12月27日 20:36 <!DOCTYPE HTML> <html> <head> <meta http-equ ...

  8. 模拟QQ心情图片上传预览

    出于安全性能的考虑,目前js端不支持获取本地图片进行预览,正好在做一款类似于QQ心情的发布框,找了不少jquery插件,没几个能满足需求,因此自己使用SWFuplad来实现这个图片上传预览. 先粘上以 ...

  9. signup图片上传预览经常总结

    html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...

随机推荐

  1. osx升级到10.10后，用pod install报错最终解决办法

    转载自:http://blog.csdn.net/liuyujinglove/article/details/40582197 http://blog.csdn.net/dqjyong/article ...

  2. UVaLive 6858 Frame （水题）

    题意:给定一个矩形框架,给定一个小矩形,问你能不能正好拼起来. 析:很简单么,就三种情况,如果是1*1的矩形,或者是1*2的一定可以,然后就是上面和下面正好能是小矩形的整数倍,左右是少一,两个就是整数 ...

  3. cookie.js 加载顺序问题

    今天遇到一个问题,在使用cookie.js时,只有在jquery.js文件后加载整体才有效 有效加载顺序 <head> <script type="text/javascr ...

  4. MVC神韵---你想在哪解脱！（十七）

    实现针对数据的CRUD操作 首先,让我们来看一下如何实现一条数据的明细信息视图.为了更好地体会这一功能,首先我们在前文所述的电影清单视图(Views文件夹下面的Movies文件夹下面的Index.cs ...

  5. Objective-C ：Category

    Category 引入 在日常的开发中,可能会碰到这样的需求:给某个类增加方法.比如说,需要给NSString类增加一个打印的方法.当然,我们可以新建一个类比如TestString,并继承NSStri ...

  6. 学习LINQ，发现一个好的工具。LINQPad！！

    今日学习LINQ,发现一个好的工具.LINQPad!! 此工具的好处在于,不需要在程序内执行,直接只用工具测试.然后代码通过即可,速度快,简洁方便. 可以生成其LINQ查询对应的lambda和SQL语 ...

  7. 去除Linq to Sql 查询结果中的空格

    原来的写法: Dim db = From city In DataContext1.AddressCity Where city.ProvinceID = dgvAddress(2, e.RowInd ...

  8. 应用XML作为数据库的快速开发框架

    背景 我经常应用C#开发一些小的桌面程序,这些桌面程序往往有以下几个特点: 程序比较小,开发周期很短. 程序的数据量不大,多数情况下不超过1万行记录. 对程序的性能要求不高. 程序并发很少或者基本没有 ...

  9. Codeforces Gym 100513G G. FacePalm Accounting 暴力

    G. FacePalm Accounting Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/gym/100513 ...

  10. 分享一个圆角自定义的漂亮AlertDialog

    \res\drawable-hdpi\bg_title_custom_dialog.xml: <?xml version="1.0" encoding="utf-8 ...