以往想要实现图片预览基本都是先传至服务器后等返回链接地址才能进行预览，使用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. Char Varchar Nvarchar区别

    char和varchar是一样的字符型,不同在于,varchar比char更灵活,精确,且不占内存空间,当你取同样的字符时,char会在该字符后面加上空格,而varchar则只取得这个字符,比如有字段 ...

  2. angularJS学习手册（1）

    欢迎来到augularJS的学习 一.什么是angularJS? angular的英文意思是角,为什么要叫angular我也不知道. AngularJS是一个MV*(Model-View-Whatev ...

  3. Android开发-解决 AIDL 中找不到couldn't find import for class错误

    最近在使用AIDL做IPC的时候,在处理复杂的数据类型的时候,编译器总是报couldn't find import for class错误,所以在这里总结下AIDL使用的时候的一些注意事项,希望对你能 ...

  4. Thinkphp 文本编辑器

    文本编辑器:可以从网上下载---ueditor文件夹里面包含php和utf8-php两个文件夹 平时使用时主要用到获取内容和写入内容两个按钮 获取内容: <!DOCTYPE html PUBLI ...

  5. 织梦dede标签tags的美化教程

    我们在行dede仿站的时候,经常会遇到tags标签的调用,调用非常简单,官方有专门的调用标签,但是官方的调用是一成不变的模式,dede5.6以前的版本,基本上都是黑色相同大小的表示,而在dede5.7 ...

  6. poj 2782 Bin Packing (贪心+二分)

    F - 贪心+ 二分 Time Limit:3000MS     Memory Limit:0KB     64bit IO Format:%lld & %llu   Description ...

  7. javasript生成 uuid的几种算法分享

    方式一 function uuid() { var s = []; var hexDigits = "0123456789abcdef"; for (var i = 0; i &l ...

  8. spring xml配置标签详解

    <!-- 指定类的名称 在对bean进行定义时,除了使用id属性来指定名称之外,为了提供多个名称,可以使用alias标签来指定. --> <alias name="&quo ...

  9. 转：cookie和session（二）——php应用

    文章来自于:http://blog.csdn.net/half1/article/details/21650211 本文将介绍cookie在session在php中的基本用法. 1.cookie   ...

  10. 转：Sharethrough使用Spark Streaming优化实时竞价

    文章来自于:http://www.infoq.com/cn/news/2014/04/spark-streaming-bidding 来自于Sharethrough的数据基础设施工程师Russell ...