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

    UISegmentControl .UIStepper UISegmentControl 1. UISegmentedControl *segmentControl = [[UISegmentedCo ...

  2. angularjs中ng-repeat-start与ng-repeat-end用法实例

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  3. birt 运行环境搭建（部署到tomcat）

    最近一直在研究eclipse的birt,各种坑~~~~(>_<)~~~~. Requirements:tomcat version:7.0,birt-runtime-4.6.0-20160 ...

  4. 文件操作-php

    <?php /* 建立缓存 可以用文件长时间保存数据 文件是以liunux为模型的 在Windows下只能获取file ,dir unknow linux 下可以获取block char dir ...

  5. [Git]Git远程仓库

    1.创建ssh key 查看主目录下面 C:\Users\Administrator\.ssh 是否存在 id_rsa 和 id_rsa.pub 文件,如果不存在需要generate new key. ...

  6. inet_aton等函数

    地址转换函数 int inet_aton(const char *strptr,struct in_addr *addrptr) 将strptr所指C字符串转换成一个32位的网络字节序二进制值,并同过 ...

  7. 粗看C#委托

    C#的好多定义跟C艹不太相同,先来分析一下“委托”. 1. 委托的定义: 委托,可以认为是类型安全的函数指针,类型安全就是指明确定义了返回类型与参数类型,在C#代码编译时就能够确保指针传参时的安全性. ...

  8. iOS开发网络篇-JSON文件的解析

    一.什么是JSON数据 1.JSON的简单介绍 JSON:是一种轻量级的传输数据的格式,用于数据的交互 JSON是javascript语言的一个子集.javascript是个脚本语言(不需要编译),用 ...

  9. IOS--UIAlertView的使用方法详细

    IOS--UIAlertView的使用方法详细   // UIAlertView的常用方法 // 标准样式 UIAlertView *oneAlertView = [[UIAlertView allo ...

  10. 转：php连接oracle设定字符集，避免乱码

    原文来自于:http://muyu.iteye.com/blog/399884 数据库用oracle,当php连接oracle的时候,最好指定字符集. 查PHP手册,oci_connect的第四个参数 ...