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 相关文章推荐
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
js弹出框轻量级插件jquery.boxy使用介绍
Jan 15 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
angular学习之从零搭建一个angular4.0项目
Jul 10 Javascript
删除table表格行的实例讲解
Sep 21 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 Javascript
JavaScript This指向问题详解
Nov 25 Javascript
基于postman获取动态数据过程详解
Sep 08 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利用COM对象访问SQLServer、Access
2006/10/09 PHP
php SQL之where语句生成器
2009/03/24 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
wamp服务器访问php非常缓慢的解决过程
2015/07/01 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
关于UTF-8的客户端用AJAX方式获取GB2312的服务器端乱码问题的解决办法
2010/11/30 Javascript
JS刷新当前页面的几种方法总结
2013/12/24 Javascript
jquery easyui中treegrid用法的简单实例
2014/02/18 Javascript
js实现遮罩层划出效果是生成div而不是显示
2014/07/29 Javascript
js实现类似jquery里animate动画效果的方法
2015/04/10 Javascript
javascript实现简单计算器效果【推荐】
2016/04/19 Javascript
jQuery实现可拖拽3D万花筒旋转特效
2017/01/03 Javascript
Ajax 加载数据 练习代码
2017/01/05 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
浅谈vue中$bus的使用和涉及到的问题
2020/07/28 Javascript
axios封装与传参示例详解
2020/10/18 Javascript
用webAPI实现图片放大镜效果
2020/11/23 Javascript
Python中字典的基础知识归纳小结
2015/08/19 Python
python测试mysql写入性能完整实例
2018/01/18 Python
替换python字典中的key值方法
2018/07/06 Python
Python使用分布式锁的代码演示示例
2018/07/30 Python
什么是python类属性
2020/06/10 Python
用python批量移动文件
2021/01/14 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
html5实现九宫格抽奖可固定抽中某项奖品
2020/06/15 HTML / CSS
印度最大的时尚购物网站:Myntra
2018/09/13 全球购物
个人自我鉴定写法
2013/11/30 职场文书
公益活动策划方案
2014/01/09 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
2014年个人年终总结
2015/03/09 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
Python中else的三种使用场景
2021/06/16 Python
nginx sticky实现基于cookie负载均衡示例详解
2022/12/24 Servers