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.ajax向后台传递数组问题的解决方法
May 12 jQuery
jQuery Validate 校验多个相同name的方法
May 18 jQuery
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
基于jQuery Ajax实现下拉框无刷新联动
Dec 06 jQuery
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 jQuery
jquery+php后台实现省市区联动功能示例
May 23 jQuery
jquery实现烟花效果(面向对象)
Mar 10 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
PHP实现文件下载断点续传详解
2014/10/15 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
Linux+Nginx+MySQL下配置论坛程序Discuz的基本教程
2015/12/23 PHP
PHP简单实现冒泡排序的方法
2016/12/26 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
PHP函数积累总结
2019/03/19 PHP
php实现的证件照换底色功能示例【人像抠图/换背景图】
2020/05/29 PHP
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
Javascript浅谈之引用类型
2013/12/18 Javascript
JS实现很实用的对联广告代码(可自适应高度)
2015/09/18 Javascript
JavaScript实现按键精灵的原理分析
2017/02/21 Javascript
微信小程序之页面跳转和参数传递的实现
2017/09/29 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
基于python实现高速视频传输程序
2019/05/05 Python
如何基于Python获取图片的物理尺寸
2019/11/25 Python
Python基础之函数原理与应用实例详解
2020/01/03 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
Python函数生成器原理及使用详解
2020/03/12 Python
pip安装提示Twisted错误问题(Python3.6.4安装Twisted错误)
2020/05/09 Python
使用OpenCV对车道进行实时检测的实现示例代码
2020/06/19 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
Python __slots__的使用方法
2020/11/15 Python
html5绘制时钟动画
2014/12/15 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
Street One瑞士:德国现代时装公司
2019/10/09 全球购物
销售职业生涯规划范文
2014/03/14 职场文书
中华魂演讲稿
2014/05/13 职场文书
电子专业求职信
2014/06/19 职场文书
销售简历自我评价怎么写
2014/09/26 职场文书
Python 图片添加美颜效果
2022/04/28 Python