以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览，使用Html5选择图片并及时预览图片的代码如下，使用起来更爽了。

<!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 file = this.files[0];    //选择上传的文件

        var r = new FileReader();

        r.readAsDataURL(file);    //Base64

        $(r).load(function(){

            $('div').html('');

        });

    });

});

</script>

</head>

<body>

<h3>HTML5 图片上传预览</h3>

<input id="img" type="file" accept="image/*" /><br />

<div></div>

</body>

</html>

Html5选择图片并及时预览图片的更多相关文章

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

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

  2. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  3. HTML5图片拖拽预览原理及实现

    一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会 ...

  4. HTML5 图片上传预览

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

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

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

  6. html5 图片转base64预览显示

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title> ...

  7. input type=file 选择图片并且实现预览效果的实例

    为大家带来一篇input type=file 选择图片并且实现预览效果的实例. 通过<input />标签,给它指定type类型为file,可提供文件上传: accept:可选择上传类型, ...

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

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

  9. HTML5图片上传预览

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

随机推荐

  1. DOM中的node与element的区别

    先看document的两个常见method. document.createTextNode Constructor: Text document.createElement Constructor: ...

  2. Android放大镜的实现

    package chroya.demo.magnifier; import android.content.Context; import android.graphics.Bitmap; impor ...

  3. Build Android-x86 ICS 4 Virtualbox from Google Virtualbox Target and Intel Kernel 编译体验

    最近一直在研究android源码的编译,应该说研究的很辛苦,最难的是下源码,总是不停的断掉,最后感谢公司的高网速,找到方法后12G的源码只花了1个小时就下完了. 参考以下网址:http://softw ...

  4. 【jquery学习笔记】关于$(window),$("html,body").scroll()的在不同浏览器的不同反应

    已经很几次碰到了这种问题, 例子: $(window).scroll(function(){ var num=$(window).scrollTop();              //之前的写法是$ ...

  5. sql server 利用首字母拼音排序和笔画排序的语句

    --按笔画排序 select * from Student order by Sname COLLATE Chinese_PRC_Stroke_CS_AS_KS_WS --按字母拼音排序 select ...

  6. Thinkphp---练习：数据的增删改查

    利用ThinkPHP连接数据库的增删改查的例题:用到的数据库表名Info表,Nation表 数据显示页面:MainController.class.php中的方法(增删改查全包括--function ...

  7. PHP文件类型检查类-比较全的

    在CSDN上淘来的一个文件类型的类,还不错,留下自己看! <? /** * 检证文件类型类 * * @author */ class FileTypeValidation { // 文件类型,不 ...

  8. phpinfo.php

    ---恢复内容开始--- apache中的配置不对 查看httpd.conf文件中是否有: AddType ...... AddType application/x-httpd-php .php -- ...

  9. JVM笔记-temp

    jvm源码分析之堆外内存完全解读 http://lovestblog.cn/blog/2015/05/12/direct-buffer/

  10. 监测div 元素 变动

    $(div_fc_even).bind('DOMCharacterDataModified ', function(event) { } 试了很多..只有这个有效..下面这些测试了下 ,无反应 //D ...