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

本例子主要是使用HTML5 的File API,建立一個可存取到该file的url，

一个空的img标签，ID为img0,把选择的文件显示在img标签中，

实现图片预览功能。请选择支持HTML API的浏览器，比如谷歌Chrome和火狐等。

<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>请选择图片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0" >
</form>
<script>    
$("#file0").change(function(){
    var objUrl = getObjectURL(this.files[0]) ;
    console.log("objUrl = "+objUrl) ;
    if (objUrl) {
        $("#img0").attr("src", objUrl) ;
    }
}) ;
//建立一個可存取到該file的url
function getObjectURL(file) {
    var url = null ;
    if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file) ;
    } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file) ;
    } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file) ;
    }
    return url ;
}
</script>
</body>
</html>

原文地址：http://www.poluoluo.com/jzxy/201404/271810.html

hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images的更多相关文章

  1. HTML5表单内元素的required属性

    当表单内元素(如input.textarea)中有required属性并且值不为false的时候,则该字段不能为空,否则提交失败. <input type="text" au ...

  2. HTML5 智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  3. HTML5智能表单

    HTML5 智能表单 1.表单新增属性  ☀ autofocus 属性 <input type="text" autofocus/>设置 autofocus 属性,使文 ...

  4. [HTML5]HTML表单(Forms)

    表单是HTML最主要的用户输入元素 用户和网页的交互动作有鼠标悬停.点击链接(或移动触摸)和页面滚动等,这些交互方式一般只是服务器单向信息输出. 有时候用户需要输入一些信息给服务器来完成双向交互,这类 ...

  5. bootstrap 基础表单 内联表单 横向表单

    bootstrap 基础表单 内联表单 横向表单 <!DOCTYPE html> <html> <head> <title></title> ...

  6. 精美的HTML5/CSS3表单 带小图标

    今天我们要来分享一款非常精美的HTML5/CSS3表单,准备地说,这是一款经过美化的input输入表单,每一个输入表单都可以定义其两侧的小图标,非常华丽.另外,这款表单应用还采用了3种不同的风格主题, ...

  7. HTML5新表单新功能解析

    HTML5新增了很多属性功能.但是有兼容性问题,因为这些表单功能新增的.我这里做了一个简单的练习,方便参考.如果完全兼容的话,那我们写表单的时候就省了很多代码以及各种判断. <!DOCTYPE ...

  8. HTML5的表单input元素的新属性

    知识点 <HTML5的表单input元素的新属性>,留待学习分享... <!-- HTML5的表单input元素的新属性 Autocomplete:自动完成功能 Autofocus: ...

  9. Web---演示Servlet的相关类、表单多参数接收、文件上传简单入门

    说明: Servlet的其他相关类: ServletConfig – 代表Servlet的初始化配置参数. ServletContext – 代表整个Web项目. ServletRequest – 代 ...

随机推荐

  1. SpringMVC启动过程详解（li）

    通过对SpringMVC启动过程的深入研究,期望掌握Java Web容器启动过程:掌握SpringMVC启动过程:了解SpringMVC的配置文件如何配置,为什么要这样配置:掌握SpringMVC是如 ...

  2. 回顾java基础—Java数据类型

    1  java数据类型.8种基本类型,3种引用类型 基本类型(也称:原始类型):byte.short.int.long.char.float.double.boolean 引用类型:类,接口,数组 2 ...

  3. 应用SuperIO（SIO）和开源跨平台物联网框架ServerSuperIO（SSIO）构建系统的整体方案

    SSIO的更新 在SSIO上增加了UDP通讯方式,可以到Github上下载源代码.在原来的项目中,远端的设备与中心站的数据交互并没有使用过UDP方式.这种短连接的通讯链路,不容易维护,主要体现在:(1 ...

  4. 使用MyBatis Generator自动创建代码(dao,mapping,poji)

    连接的数据库为SQL server2008,所以需要的文件为sqljdbc4.jar 使用的lib库有: 在lib库目录下新建一个src文件夹用来存放生成的文件,然后新建generatorConfig ...

  5. 苹果手机不支持click文字 需要添加 cursor:pointer 才能 识别可以点击

    给一个div 绑定一个 click事件,  苹果手机会识别不了,必须添加一个 cursor:pointer 才能 识别可以点击.安卓正常识别.

  6. iOS 自定义方法 - 播放GIF

    示例代码 ///////////////////////第一种/////////////////////// ////  GifView.h//  GIFViewer////  Created by ...

  7. swift学习笔记4——扩展、协议

    之前学习swift时的个人笔记,根据github:the-swift-programming-language-in-chinese学习.总结,将重要的内容提取,加以理解后整理为学习笔记,方便以后查询 ...

  8. 转载文章（Redis中对key的操作）

    转载地址:http://www.cnblogs.com/stephen-liu74/archive/2012/03/26/2356951.html 一.概述: 在该系列的前几篇博客中,主要讲述的是与R ...

  9. Linux：常用命令

    文件压缩.解压 网络.进程 磁盘.文件使用情况 内存使用 1.文件压缩.解压 1)tar.gz文件解压: .bin.tar.gz 解压到指定目录: (指定的目录是存在的) .bin. 2)zip 文件 ...

  10. APUE 习题3-2 实现dup2，要求不使用fcntl函数。

    int mydup2(int oldfd, int newfd) {     int tfd = 0;     if (newfd < 0)     {         err_sys(&quo ...