<!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. poj 3026 Borg Maze (BFS + Prim)

    http://poj.org/problem?id=3026 Borg Maze Time Limit:1000MS     Memory Limit:65536KB     64bit IO For ...

  2. 修改浏览器accept使支持@ResponseBody

    原始:text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 application/json,text/javascript, ...

  3. STM32实验非正式报告之DMA

    前言 DMA即直接内存存取.我理解它就是一个“交通部长”抑或是一个“搬运工”,协助CPU存储或读取数据.既然它的主要工作就是“搬运”数据,服务对象自然就是内存(不太严格的说法吧,STM32中Flash ...

  4. win8 或 win2008 系统 TFS 打开或获取源代码非常慢

    最近刚更新了win8.1 .打开VS2012后,准备签出个文件,突然发现速度非常慢.打开个TFS目录都要过10多秒才能看到所有子内容.一开始以为是VS的问题更新了U4补丁.结果还是一样.后来googl ...

  5. ADO.NET 快速入门（一）：ADO.NET 概述

    ADO.NET 概述 ADO.NET是改进的ADO数据访问模型用于开发可扩展应用程序.他是专门为可伸缩性.无状态和XML核心的web而设计的.   ADO.NET使用一些ADO对象,如Connecti ...

  6. Spring声明式事务的配置~~~

    /*2011年8月28日 10:03:30 by Rush  */ 环境配置 项目使用SSH架构,现在要添加Spring事务管理功能,针对当前环境,只需要添加Spring 2.0 AOP类库即可.添加 ...

  7. 启用MySQL查询缓存

    启用MySQL查询缓存能够极大地减低数据库server的CPU使用率,实际使用情况是:开启前CPU使用率120%左右,开启后降到了10%. 查看查询缓存情况: mysql> show varia ...

  8. Spring+Ibatis集成开发实例

    首先简历数据库demo(本文选mysql) 数据库脚本: CREATE TABLE `ibatis` (  `id` varchar(20) NOT NULL,  `name` varchar(20) ...

  9. 使用TopShelf轻松开发Window服务

    关于TopShelf 描述: Topshelf is a framework for hosting services written using the .NET framework. The cr ...

  10. String类的实现

    1.在类中可以访问private成员包括两层含义:可以访问this指针的private成员:可以访问同类对象的private成员. 2.这里的String可以认为是个资源管理类,内部有个char指针, ...