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

    服务器端实现步骤: 1. 创建 DatagramSocket,指定端口号 2. 创建 DatagramPacket 3. 接收客户端发送的数据信息 4. 读取数据 package cn.jmu.edu ...

  2. 【USACO 1.1.3】黑色星期五

    [问题描述] 13号又是一个星期五.13号在星期五比在其他日子少吗?为了回答这个问题,写一个程序,要求计算每个月的十三号落在周一到周日的次数.给出N年的一个周期,要求计算1900年1月1日至1900+ ...

  3. 深入浅出理解QTimeLine类

    网上找了下QTimeLIne类的介绍,要么就是代码一贴自己看去,要么就是说不到重点,正巧自己项目遇到这个类,在这里写一下,给需要的同学看下. 因为我最近需要有动画方面配合时间间隔触发QGraphics ...

  4. TCP/IP-UDP

    We read the world wrong but say that it deceives us. "我们看错了世界,却说世界欺骗了我们" 参考资料:TCP/IP入门经典 ( ...

  5. winform批量查询单号剔除重复

    //查询分单函数        private string GetQueryInSubbillNo()        {            string strSubbillNO = " ...

  6. DeDe友情链接

    图片 {dede:flink row="} [field:link /] {/dede:flink} 文字 {dede:flink row="} [field:link /] {/ ...

  7. C语言基础学习基本数据类型-Char类型

    char类型 char类型用于储存字母和标点之类的字符.但是在技术实现上char却是整数类型.为了处理字符,计算机使用一种数字编码,用特定的整数表示特定的字符.字符变量输入输出用%c符号.定义语法如下 ...

  8. testservice小项目总结

    关于自做小项目testservice的总结: 1.Activity与Service的绑定及之间的通信: 1)关于Activity和Service的生命周期的理解: 2)bindService方法中Se ...

  9. 简化的nginx多进程模型demo

    //version 1:以下代码仅演示nginx多进程模型[test@vm c]$ cat mynginx.c#include <stdio.h> #include <string. ...

  10. MySQL笔记--查询语句实践

    有一个用户表,属性为 id,age,buytime 创建表以及插入数据的语句 CREATE TABLE USER( id INT, age INT, buytime INT ) ,,); ,,); , ...