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>

HTML5 jQuery图片上传前预览的更多相关文章

  1. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  2. jquery图片上传前预览剪裁

    http://www.webmotionuk.co.uk/jquery/image_upload_crop.php http://keleyi.com/a/bjad/liuvpkke.htm 不错的d ...

  3. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

  4. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  5. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  6. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  8. HTML5 FileReader实现图片上传前预览

    如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...

  9. jquery 图片上传本地预览V1.2

    基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级  修复jquery版本问题  支持任意jqu ...

随机推荐

  1. WPF 自定义窗口标题栏

    1.建一个WPF资源词典,在其中定义窗口样式,并在App.xaml中指定其为程序资源 2.写一个继续自windows的类,并指定这个类的Style为第一步资源里的样式 3.新建窗口时,分别把xaml文 ...

  2. 'vt100': unknown terminal type.

    在Linux终端执行clear或top命令时出现:vt100: unknown terminal type的错误 1.临时办法,下次启动失效,需要重新执行 执行以下命令 $ printenv | gr ...

  3. 解决eclipse“copy项目重命名后重新发布，项目名在地址栏仍然是原来的项目名”的问题

    任务描述:复制项目spring_user并重命名为spring_user_test 一.通过按F2和以下方式可以修改目标项目在workspace的名字 点击项目右键选择properties,输入关键字 ...

  4. Scroll文字滚动js

    function ScrollImgLeft(){ var speed=50, doc=document, scroll_begin = doc.getElementById("scroll ...

  5. NOI2015考试小结

    这次NOI2015有幸获得金牌考进了国家集训队,意味着我的OI退役时间既省选之后有延迟了好几个月,又有了新的目标吧. 先说一下考试之外的感受吧,学军宿舍很牛X,接待NOIers而不提供插座,唯一可以用 ...

  6. httpsclient 自动获取证书 无证书访问 验证过能直接用

    首先实现写一个 实现接口SecureProtocolSocketFactory的类. /** *ClassName: bcde *date: 2015年2月26日 下午4:51:01 * *@auth ...

  7. YUV格式详解

    What is YUV YUV,是一种颜色编码方法. YUV是编译true-color颜色空间(color space)的种类,Y'UV, YUV, YCbCr,YPbPr等专有名词都可以称为YUV, ...

  8. CSU1321+SPFA

    简单题 /* 简单的bfs */ #include<algorithm> #include<iostream> #include<string.h> #includ ...

  9. mysql 查询重复值命令

    积累备忘啊: ; 从t_maintenanceinfo表查询重复记录的mtiId 和ip字段,以及重复条数

  10. AppStore 沙箱环境的测试流程

    1:请确保你打得版本是 沙箱环境的版本 2:请确保的手机序列号已经加入沙箱环境3:请确保你的手机Apple ID 账户已经退出 ------ 如果这些都准备好了,再进行测试吧,不然一堆的未知问题等着你 ...