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. Map集合

    1:Map (1)将键映射到值的对象. 一个映射不能包含重复的键:每个键最多只能映射到一个值. 键值对的方式存在 (2)Map和Collection的区别? A:Map 存储的是键值对形式的元素,键唯 ...

  2. HTTP各状态码解释

      状态码 含义 100 客户端应当继续发送请求.这个临时响应是用来通知客户端它的部分请求已经被服务器接收,且仍未被拒绝.客户端应当继续发送请求的剩余部分,或者如果请求已经完成,忽略这个响应.服务器必 ...

  3. 【夯实PHP基础】php开发时遇到白页的调试方法

    本文地址   分享提纲: 1. 设置报错报错级别,显示报错 2. 白页的可能原因     1.[设置报错报错级别,显示报错] php开发时,访问地址也对,但就是不出来页面,显示的是 白的页面,所以就可 ...

  4. linux使用wkhtmltopdf报错error while loading shared libraries:

    官网提示 linux需要这些动态库.depends on: zlib, fontconfig, freetype, X11 libs (libX11, libXext, libXrender) 在li ...

  5. js对象和继承总结

    创建对象方式: [工厂模式]:无法解决对象识别问题 [构造函数模式]:每个方法都要在每个实例上创建一遍 [原型模式]:原型上属性为引用类型的问题,见例子 [组合模式]:解决上述问题 [动态原型模式]: ...

  6. ReactiveCocoa 冷热订阅(cold subscribe, hot subscribe)

    ReactiveCocoa支持两种订阅方式,一种是冷订阅,一种是热订阅. 热订阅的特点: 1.不管有没有消息订阅着,发送者总会把消息发出去. 2.不管订阅者是什么时候订阅的,发送者总是会把相同的消息发 ...

  7. Activity的释放

    1.ActivityTwo.finish(); 在你的activity动作完成的时候,或者Activity需要关闭的时候,调用此方法.当你调用此方法的时候,系统只是将最上面的Activity移出了栈, ...

  8. 仿喜马拉雅实现ListView添加头布局和脚布局

     ListView添加头布局和脚布局 之前学习喜马拉雅的时候做的一个小Demo,贴出来,供大家学习参考: 如果我们当前的页面有多个接口.多种布局的话,我们一般的选择无非就是1.多布局:2.各种复杂滑动 ...

  9. ASP.NET MVC 5 01 - ASP.NET概述

    本篇目录: ASP.NET 概述 .NET Framework 与 ASP.NET ASP.NET MVC简介 ASP.NET的特色和优势 典型案例 ▁▃▅ ASP.NET概述 ▅▃▁ 目前开发B/S ...

  10. hibernate注解CascadeType

    http://blog.csdn.net/strong8808/article/details/6318994(参考) CascadeType.REFRESH:级联刷新,当多个用户同时作操作一个实体, ...