jQuery+HTML5实现图片上传前预览效果


Posted in Javascript onAugust 20, 2015

本文实例讲述了jQuery+HTML5实现图片上传前预览效果。分享给大家供大家参考。具体如下:

这里主要是使用HTML5 的File API,建立一??可存取到该file的url,一个空的img标签,ID为img0,把选择的文件显示在img标签中,实现图片预览功能。请选择支持HTML API的浏览器,比如谷歌Chrome和火狐等。

运行效果如下图所示:

jQuery+HTML5实现图片上传前预览效果

在线演示地址如下:

具体代码如下:

<!DOCTYPE html>
<html>
<head>
<title>HTML5上传图片预览</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="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>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
JavaScript 利用Cookie记录用户登录信息
Dec 08 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
js页面跳转常用的几种方式
Nov 25 Javascript
Javascript 中的 call 和 apply使用介绍
Feb 22 Javascript
Javascript添加监听与删除监听用法详解
Dec 19 Javascript
浅谈javascript 迭代方法
Jan 21 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
JavaScript笔记之数据属性和存储器属性
Mar 31 Javascript
jQuery使用cookie与json简单实现购物车功能
Apr 15 Javascript
微信小程序 支付功能实现PHP实例详解
May 12 Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 Javascript
详解JavaScript原型与原型链
Nov 16 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 #Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 #Javascript
js图片翻书效果代码分享
Aug 20 #Javascript
JS给Textarea文本框添加行号的方法
Aug 20 #Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 #Javascript
javascript如何操作HTML下拉列表标签
Aug 20 #Javascript
七夕情人节丘比特射箭小游戏
Aug 20 #Javascript
You might like
用php+mysql一个名片库程序
2006/10/09 PHP
封装一个PDO数据库操作类代码
2009/09/09 PHP
PHP STRING 陷阱原理说明
2010/07/24 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
php stripslashes和addslashes的区别
2014/02/03 PHP
微信公众号模板消息群发php代码示例
2016/12/29 PHP
客户端静态页面玩分页
2006/06/26 Javascript
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
2014/12/28 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
node.js操作mongodb学习小结
2015/04/25 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
JavaScript面向对象程序设计教程
2016/03/29 Javascript
第一篇初识bootstrap
2016/06/21 Javascript
JavaScript将DOM事件处理程序封装为event.js 出现的低级错误问题
2016/08/03 Javascript
AngularJS中ng-class用法实例分析
2017/07/06 Javascript
javascript按顺序加载运行js方法
2017/12/01 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
vue项目中的webpack-dev-sever配置方法
2017/12/14 Javascript
JS实现仿微信支付弹窗功能
2018/06/25 Javascript
node省市区三级数据性能测评实例分析
2019/11/06 Javascript
jQuery实现的移动端图片缩放功能组件示例
2020/05/01 jQuery
详解Swift中属性的声明与作用
2016/06/30 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python读取yaml文件后修改写入本地实例
2020/04/27 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
美术专业学生个人自我评价
2013/09/19 职场文书
道路交通安全实施方案
2014/03/12 职场文书
导游个人求职信范文
2014/03/23 职场文书
责任心演讲稿
2014/05/14 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
长城导游词
2015/01/30 职场文书
读《解忧杂货店》有感:请相信一切都是最好的安排
2019/11/07 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
python 单机五子棋对战游戏
2022/04/28 Python