<!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. Linux df 命令用法示例

    介绍: Linux中df命令可以用来显示目前在Linux系统上的文件系统的磁盘使用情况统计.这些工具可以方便地知道哪些文件系统消耗多少内存.此外,如果被拾起,并且提供一个特定的文件名作为df命令的参数 ...

  2. IntelliJ IDEA 开发工具项目maven管理

    今天自己重新部署一下intellij下的项目开发环境,顺便把maven管理项目jar包的方法梳理一下 (1)首先下载apache-maven-3.0.4版本的maven,我自己解压在D:\maven\ ...

  3. ManagementFactory (一) getClassLoadingMXBean

    ClassLoadingMXBean case import java.lang.management.ClassLoadingMXBean; import java.lang.management. ...

  4. ssh使用ajax异步通讯. json与对象转换的几个小问题

    首先是hibernate,用ssh做项目的时候,使用hibernate,这个hibernate博大精深,至今只懂皮毛.建对象时候使用它的一对多,多对多联系,. 这样子,对象转json的时候会产生循环依 ...

  5. ECSHOP数据表结构完整仔细说明教程

    From:http://www.ecshop119.com/ecshopjc-868.html s_account_log //用户账目日志表 字段 类型 Null 默认 注释 log_id medi ...

  6. kaptcha验证码插件的使用

    kaptcha 是一个非常实用的验证码生成工具.有了它,你可以生成各种样式的验证码,因为它是可配置的.kaptcha工作的原理是调用 com.google.code.kaptcha.servlet.K ...

  7. iOS 抖动动画

    -(void)animationWithCell:(WaterLevelCollectionCell *)cell{ // 添加摇晃动画 { CAKeyframeAnimation *frame=[C ...

  8. const 成员方法

    1.使用场景 代码提供者告诉客户(代码使用者),这个方法不会修改对象的内容,请客户放心使用. 2.代码提供者,尝试在const成员方法中修改对象内容,编译报错.在成员方法中,this是const 指针 ...

  9. hdu 5534 Partial Tree 背包DP

    Partial Tree Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pid= ...

  10. HDU 1080 DP

    匹配两个人相似度. A,G,C.T.每两个都会有一个相应的值,给出两串基因.长度能够不一样,能够在基因中间加_使两串长度一样.然后有一个相应值.求最大相应值. 先做出相应的表 DP方程: x=dp[i ...