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. CentOS 6.2 Eclipse CDT 开发环境搭建

    一.安装中文语言支撑 我当初安装CentOS6.2时选择了中文语言支持,有iBus和拼音输入法,有gnome和kde 没有安装的可以参考:CentOS英文环境下使用中文输入法  安装中文语言支持和输入 ...

  2. Eclipse搭建Maven Prooject（终于）

    今天我们一起来探讨eclipse搭建maven项目的步骤 一.建一个maven项目, 1.找到File ,点击 2.弹出窗口,再点击new 3.弹出窗口,点击other 4.输入maven,找到mav ...

  3. System.nanoTime与System.currentTimeMillis的理解与区别

    System类代表系统,系统级的很多属性和控制方法都放置在该类的内部.该类位于java.lang包. 平时产生随机数时我们经常拿时间做种子,比如用System.currentTimeMillis的结果 ...

  4. React Native JSX value should be expression or a quoted JSX text.

    问题描述:  我在使用props时候, 我的写法是这样的 ... <View> <Person name='john' age=32 gender=true></Pers ...

  5. KeySpaceNotification 键空间通知

    KeySpaceNotification 键空间通知 1.Redis键淘汰机制简介 在Redis中,内存的大小是有限的,所以为了防止内存饱和,需要实现某种键淘汰策略.主要有两种方法,一种是当Redis ...

  6. (视频)Erich Gamma 与 Visual Studio Online 的一点野史

    大家对Erich Gamma的熟悉应该都集中在<设计模式>, Eclipse以及最近微软所发布的Visual Studio Code跨平台代码编辑器.其实在Erich加入微软的头几年里,他 ...

  7. SQLite学习笔记(十一)&&虚拟机原理

    前言      我们知道任何一种关系型数据库管理系统都支持SQL(Structured Query Language),相对于文件管理系统,用户不用关心数据在数据库内部如何存取,也不需要知道底层的存储 ...

  8. SQL面试笔试经典题(Part 2)

    本文是在Cat Qi的原贴的基础之上,经本人逐题分别在MySql数据库中实现的笔记. 参考原贴:http://www.cnblogs.com/qixuejia/p/3637735.html 01 问题 ...

  9. [笔记]ubuntu安装flashplayer

    为firefox安装: 下载tar.gz压缩包:http://get.adobe.com/cn/flashplayer/ 解压:tar -xvxf install_flash_player_11_li ...

  10. 萌新笔记——C++里创建 Trie字典树（中文词典）（二）（插入、查找、导入、导出）

    萌新做词典第二篇,做得不好,还请指正,谢谢大佬! 做好了插入与遍历功能之后,我发现最基本的查找功能没有实现,同时还希望能够把内存的数据存入文件保存下来,并可以从文件中导入词典.此外,数据的路径是存在配 ...