<!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. bzoj 2190 仪仗队（欧拉函数）

    2190: [SDOI2008]仪仗队 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 2245  Solved: 1413[Submit][Statu ...

  2. 使用https时，网站一些内容不能正常显示的问题

    在网站开发过程中,使用http网站页面一切正常. 但改成https后,发现网站一些页面不能正常显示出来,比如看上去没有样式等. 原因是: 在程序中调用了比如JQuery,而引用的URL使用的是Http ...

  3. Unity3D之飞机游戏追踪导弹制作

    最近开发完成一款打飞机的游戏,记录一下制作追踪导弹的方法,最开始在网上找到的资料制作出来的追踪导弹都不够真实,主要的问题是没有对导弹进行一个阀值处理,导弹每帧都始终会面向目标,而不是按照一定的角度进行 ...

  4. hdu 4781 Assignment For Princess (2013ACMICPC 成都站 A)

    http://acm.hdu.edu.cn/showproblem.php?pid=4781 由于题目太长,这里就不直接贴了,直接说大意吧. 题目大意:有一个n个点,m条边的有向图,每条边的权值分别为 ...

  5. OpenNebula Restfull 接口请求示例

    Fri Jun 20 07:28:20 2014 [I]: 10.0.2.2 - - [20/Jun/2014 07:28:20] "POST /vmtemplate HTTP/1.1&qu ...

  6. Android Study ING

    http://bbs.csdn.net/topics/370249613 android的tools和adb命令 http://www.u148.net/article/102147.html htt ...

  7. UVa10050 Hartals

    // 题意:输入n和p个整数H[i],其中H[i]表示每H[i]天会有一次活动(但周五周六除外).输出前n天中有多少天有活动.模拟从周日开始.   #include<cstdio> #in ...

  8. Codeforces Round #313 (Div. 2) A. Currency System in Geraldion 水题

    A. Currency System in Geraldion Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/c ...

  9. osg 笔记一 （转）

    场景图形采用一种自顶向下的,分层的树状数据结构来组织空间数据集,以提高渲染的效率 场景图形树结构的顶部是一个根节点,从根节点向下延伸,各个组节点中均包含了几何信息和用于控制其外观的渲染状态信息.根节点 ...

  10. Cts框架解析(12)-ITargetPreparer

    測试开启前的设备系统准备工作. 接口 /* * Copyright (C) 2010 The Android Open Source Project * * Licensed under the Ap ...