<!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. [iOS 多线程 & 网络 - 2.6] - 使用POST上传JSON数据 & 多值参数

    A.上传JSON 1.思路: 必须使用POST方法才能上传大量JSON数据 设置请求头:设置Content-Type 设置请求体,JSON实际相当于字典,可以用NSDictionary NSJSONS ...

  2. javascript中数组的迭代等操作

  3. UIButton上使用UIEdgeInsetsMake让title跟图片对齐

    UIButton上使用UIEdgeInsetsMake让title跟图片对齐 默认情况下,不设置的效果,都使居中现实,button为150*150 使用以下设置后:   [self setTitleE ...

  4. 《数据通信与网络》笔记--SCTP

    SCTP(stream control transmission protocol)是一种新的可靠的,面向报文的传输层控制协议.它兼有UDP和TCP的特性,它是可靠的面向报文的协议,它保存报文的边界, ...

  5. BZOJ 1036 [ZJOI2008]树的统计Count (树链剖分 - 点权剖分 - 单点权修改)

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1036 树链剖分模版题,打的时候注意点就行.做这题的时候,真的傻了,单词拼错检查了一个多小时 ...

  6. 从Jetty、Tomcat和Mina中提炼NIO构架网络服务器的经典模式（一）

    本文转载自 http://blog.csdn.net/cutesource/article/details/6192016 如何正确使用NIO来构架网络服务器一直是最近思考的一个问题,于是乎分析了一下 ...

  7. 树莓派加入定时任务实现花生壳定时重启（linux的定时任务）

    由于花生壳在linux下不稳定,联系开机一个星期左右会挂掉,所以要使用定时任务实现每小时刷新一次/启动一次. 使用的是linux下的定时任务crontab去实现. 实现步骤: 1.编辑/etc/cro ...

  8. Elasticsearch和mysql数据同步（elasticsearch-jdbc）

    1.介绍 对mysql.oracle等数据库数据进行同步到ES有三种做法:一个是通过elasticsearch提供的API进行增删改查,一个就是通过中间件进行数据全量.增量的数据同步,另一个是通过收集 ...

  9. C# 上传excel文档解析出里面数据

    if (fileExt.ToUpper() == ".XLS" || fileExt.ToUpper() == ".XLSX" || fileExt.ToUpp ...

  10. SQL Server活动监视器

    打开SQL Server活动监视器: