HTML5 jQuery图片上传前预览
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图片上传前预览的更多相关文章
- 【转】HTML5 jQuery图片上传前预览
hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...
- jquery图片上传前预览剪裁
http://www.webmotionuk.co.uk/jquery/image_upload_crop.php http://keleyi.com/a/bjad/liuvpkke.htm 不错的d ...
- ASP.NET MVC图片上传前预览
回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...
- input file实现多选,限制文件上传类型,图片上传前预览功能
限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...
- html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- 【转】html之file标签 --- 图片上传前预览 -- FileReader
记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...
- HTML5 FileReader实现图片上传前预览
如果你的浏览器支持Html5的FileReader的话,实现图片上传前进行预览是一件非常容易之事情. 在控制器,创建一个视图Action: jQuery代码: 实时演示一下: 下面内容于2014-11 ...
- jquery 图片上传本地预览V1.2
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级 修复jquery版本问题 支持任意jqu ...
随机推荐
- jquer ajax
function SetValue() { var strCodeName = $("#MainContent_ddlFullNameAndFullName").val(); ) ...
- 【IOCP】 IOCP模型属于一种通讯模型- 较难
http://baike.baidu.com/link?url=e9vXkKd2aHp8VDr1XTURdwQB4K85r28IYjeMwRIyuaXtsrCsXHY1eohiFgsDXRYRlj6x ...
- Windows.Andy.Code4App.dll Win8.1/WP8.1通用类库@ver1.0.0
直接入题! Win8.1和WP8.1眼下已经渐渐融为一体,WP8.1不断向Win8.1靠拢,虽然一些方法上WP8.1和Win8.1不同(ps:WP8.1和Win8.1的不同之处),但大部分还是相同的. ...
- 【POJ2104】kth num
You are working for Macrohard company in data structures department. After failing your previous tas ...
- ios 保存本地数据的方法
1. NSString *path = [[NSBundle mainBundle] pathForResource:@"文件名" ofType:@"plist" ...
- 1021: [SHOI2008]Debt 循环的债务 - BZOJ
Description Alice.Bob和Cynthia总是为他们之间混乱的债务而烦恼,终于有一天,他们决定坐下来一起解决这个问题.不过,鉴别钞票的真伪是一件很麻烦的事情,于是他们决定要在清还债务的 ...
- [转载]C#中播放背景音乐几种的方法
最经在写winform程序,其中有用到播放背景音乐 特此收集了一些网上的教程: 1.调用非托管的dll using System.Runtime.InteropServices; //DllImpor ...
- orale--varchar2(5) vs varchar2(5 byte) vs varchar2(5 char)
varchar2(5) == varchar2(5 byte)------> 'abcde' 但是中文不是5 个字符 varchar2(5 char)----> 'abcde'
- URAL 1009 K-based numbers(DP递推)
点我看题目 题意 : K进制的N位数,不能有前导零,这N位数不能有连续的两个0在里边,问满足上述条件的数有多少个. 思路 : ch[i]代表着K进制的 i 位数,不含两个连续的0的个数. 当第 i 位 ...
- linux useradd添加用户
useradd命令用来建立用户帐号和创建用户的起始目录,使用权限是超级用户. useradd -m -s /bin/bash -g 群组名 用户名 其中 -m:自动建立用户的登入目录. -s:指定用户 ...