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

    [题目大意] 有一个4x4规格的一个棋盘,现在有16个一面黑一面白的棋子分布在这个棋盘上. 翻转一个棋子能够使它以及它上下左右的四个棋子从黑变白,从白变黑. 现在问你至少要经过多少次操作才能够使得整个 ...

  2. ExtJS智能提示工具spket安装与破解

    用myeclipse写java程序,最怕的是什么呢,写javascript代码,原因很简单,没有智能提示,ExtJS是完全js代码的界面库,写起来就更痛苦了,幸好有人做了spket插件,此文采用傻瓜式 ...

  3. TIMESTAMP和DATETIME的区别

    TIMESTAMP和DATETIME的区别 1. 存储空间不同 a) TIMESTAMP占用4个字节 b) DATETIME占用8个字节 2. 受时区影响 c) TIMESTAMP实际记录的是1970 ...

  4. JS动态加载 js css

    1.动态加载js function loadScript( url ){ var script = document.createElement( "script" ); scri ...

  5. javascript 向上滚动

    <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Co ...

  6. python运维开发之第九天

    一.paramiko模块 1.简介 大家会发现,常见的解决方法都会需要对远程服务器必要的配置,如果远程服务器只有一两台还好说,如果有N台,还需要逐台进行配置,或者需要使用代码进行以上操作时,上面的办法 ...

  7. Tr A

    Problem Description A为一个方阵,则Tr A表示A的迹(就是主对角线上各项的和),现要求Tr(A^k)%9973. Input 数据的第一行是一个T,表示有T组数据. 每组数据的第 ...

  8. 畅谈Spring设计哲学

    自己从学习编程开始到现在有一个习惯:一直喜欢把软件开发中的技术和思路放到实际生活中去类比考虑.自己平常也喜欢开一些关于软件哲学的书籍,事实证明这些书籍对自己的学习新技术很有很大的帮助.数学是一切学科的 ...

  9. ImportError: No module named matlab

    这个matlab已经改名为pylab了,你可以运行: from pylab import *

  10. More lumber is required

    hdu4396:http://acm.hdu.edu.cn/showproblem.php?pid=4396 题意:一个无向带权图,然后给出起点s,终点e,让你求s到e的最短路径,但是这里的路径有要求 ...