html5以及jQuery实现本地图片上传前的预览代码实例讲解


Posted in jQuery onMarch 01, 2021

html5以及jQuery实现本地图片上传前的预览,效果类似如下:
选择图片前的页面:

html5以及jQuery实现本地图片上传前的预览代码实例讲解

选择图片之后的预览效果:

html5以及jQuery实现本地图片上传前的预览代码实例讲解

下面直接上代码(只是最简单的实现代码,css样式没有复制,自己随意发挥)

<!DOCTYPE html> 
<html> 
<head> 
<title>HTML5上传图片预览</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script src="https://3water.com/ajaxjs/jquery-1.6.2.min.js"></script> 
</head> 
<body> 

 ...

 <form name="form0" id="form0" > 
 <!-- 这里特别说一下这个 multiple="multiple" 添加上这个之后可以一次选择多个文件进行上传,是 html5 的新属性--> 
 <input type="file" name="file0" id="file0" multiple="multiple" /><br><img src="" id="img0" > 
 </form> 

 ...

<script> 
 $("#file0").change(function(){ 
  // getObjectURL是自定义的函数,见下面 
  // this.files[0]代表的是选择的文件资源的第一个,因为上面写了 multiple="multiple" 就表示上传文件可能不止一个 
  // ,但是这里只读取第一个 
  var objUrl = getObjectURL(this.files[0]) ; 
  // 这句代码没什么作用,删掉也可以 
  // console.log("objUrl = "+objUrl) ; 
  if (objUrl) { 
  // 在这里修改图片的地址属性 
  $("#img0").attr("src", objUrl) ; 
  } 
 }) ; 
 //建立一??可存取到?file的url 
 function getObjectURL(file) { 
  var url = null ; 
  // 下面函数执行的效果是一样的,只是需要针对不同的浏览器执行不同的 js 函数而已 
  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实现本地图片上传前的预览内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

jQuery 相关文章推荐
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jQuery自定义元素右键点击事件(实现案例)
Apr 28 jQuery
jquery实现提示语淡入效果
May 05 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
使用jquery模拟a标签的click事件无法实现跳转的解决
Dec 04 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
jQuery位置选择器用法实例分析
Jun 28 jQuery
jQuery实现轮播图源码
Oct 23 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 jQuery
jQuery实现简易聊天框
Feb 08 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 #jQuery
jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能
Jan 29 #jQuery
jquery实现点击左右按钮切换图片
Jan 27 #jQuery
jquery实现穿梭框功能
Jan 19 #jQuery
jQuery实现穿梭框效果
Jan 19 #jQuery
jQuery冲突问题解决方法
Jan 19 #jQuery
jQuery实现购物车全功能
Jan 11 #jQuery
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
php date()日期时间函数详解
2010/05/16 PHP
php实现rc4加密算法代码
2012/04/25 PHP
ucenter通信原理分析
2015/01/09 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
php中str_pad()函数用法分析
2017/03/28 PHP
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
Canvas实现动态的雪花效果
2017/02/13 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
获取本机IP地址的实例(JavaScript / Node.js)
2017/11/24 Javascript
Vue实现简单分页器
2018/12/29 Javascript
如何在JS文件中获取Vue组件
2020/09/16 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
[01:01:22]VGJ.S vs OG 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
itchat接口使用示例
2017/10/23 Python
教你用Python写安卓游戏外挂
2018/01/11 Python
Python3.6.0+opencv3.3.0人脸检测示例
2018/05/25 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
python获取本周、上周、本月、上月及本季的时间代码实例
2020/09/08 Python
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
Java面向对象面试题
2016/12/26 面试题
高一英语教学反思
2014/01/22 职场文书
4s店市场专员岗位职责
2014/04/09 职场文书
领导干部“四风”问题批评与自我批评材料
2014/09/24 职场文书
神龙架导游词
2015/02/11 职场文书
教师求职简历自我评价
2015/03/10 职场文书
物业保洁员管理制度
2015/08/05 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
python中Tkinter 窗口之输入框和文本框的实现
2021/04/12 Python
MySQL 查询速度慢的原因
2021/05/25 MySQL