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. 《ENVI下遥感影像自然真彩色合成方法》——TM、spot5

    来源：http://blog.sina.com.cn/s/blog_764b1e9d0100tz4f.html#bsh-73-375271630

  2. Sybase 导入导出命令

    BCP命令详解 BCP是SYBASE公司提供专门用于数据库表一级数据备份的工具. 一般存放在所安装的ASE或者Open Client 的BIN目录中. 可执行文件名称为bcp.EXE 参数列表如下:( ...

  3. 子查询优化成join关联查询时要注意一对多关系

    mysql> select * from t where t.id in (select t1.tid from t1); +------+ | id | +------+ | +------+ ...

  4. Contest2037 - CSU Monthly 2013 Oct (Problem J: Scholarship)

    http://acm.csu.edu.cn/OnlineJudge/problem.php?cid=2037&pid=9 [题解]: 这题卡了一下,卡在负数的情况,负数输出 0 这题主要找到一 ...

  5. 小啃机器学习（1）-----ID3和C4.5决策树

    第一部分:简介 ID3和C4.5算法都是被Quinlan提出的,用于分类模型,也被叫做决策树.我们给一组数据,每一行数据都含有相同的结构,包含了一系列的attribute/value对. 其中一个属性 ...

  6. gif格式的图片不能存在与包含js目录的路径中?

    如题:gif格式的图片不能存在与包含js目录的路径中?是我的设置问题?还是真不能存在于js目录中. 今天纠结了一下午,某个项目中的效果就是出不来,找了差不多两个半小时... 在D盘新建一个js和jss ...

  7. hdu 1525 Euclid's Game 博弈论

    思路:两个数a和b,总会出现的一个局面是b,a%b,这是必然的,如果a>=b&&a<2*b,那么只有一种情况,直接到b,a%b.否则有多种情况. 对于a/b==1这种局面, ...

  8. linux 使用kill命令杀死进程的几个办法

    常规篇: 首先,用ps查看进程,方法如下: $ ps -ef ……smx       1822     1  0 11:38 ?        00:00:49 gnome-terminalsmx   ...

  9. linux 配置java环境变量

    修改/etc/profile文件 如果你的计算机仅仅作为开发使用时推荐使用这种方法,因为所有用户的shell都有权使用这些环境变量,可能会给系统带来安全性问题. ·用文本编辑器打开/etc/profi ...

  10. 【BZOJ 2829】 2829: 信用卡凸包 （凸包）

    2829: 信用卡凸包 Description Input Output Sample Input 2 6.0 2.0 0.0 0.0 0.0 0.0 2.0 -2.0 1.5707963268 Sa ...