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实现文章图片弹出放大效果
Apr 06 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
jquery DataTable实现前后台动态分页
Jun 17 jQuery
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
jQuery实现的下雪动画效果示例【附源码下载】
Feb 02 jQuery
[原创]jquery判断元素内容是否为空的方法
May 04 jQuery
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
jQuery插件实现的日历功能示例【附源码下载】
Sep 07 jQuery
jQuery使用bind动态绑定事件无效的处理方法
Dec 11 jQuery
基于jQuery实现挂号平台首页源码
Jan 06 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
codeigniter中测试通过的分页类示例
2014/04/17 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
PHPExcel简单读取excel文件示例
2016/05/26 PHP
thinkPHP5框架路由常用知识点汇总
2019/09/15 PHP
javascript 闭包
2011/09/15 Javascript
JS操作JSON要领详细总结
2013/08/25 Javascript
基于jquery插件实现常见的幻灯片效果
2013/11/01 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
2016/03/05 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
vue父组件向子组件动态传值的两种方法
2017/11/11 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
Node错误处理笔记之挖坑系列教程
2018/06/05 Javascript
vue slots 组件的组合/分发实例
2018/09/06 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
2019/04/11 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
python网络编程学习笔记(一)
2014/06/09 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
python使用邻接矩阵构造图代码示例
2017/11/10 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Python字符串的修改方法实例
2019/12/19 Python
Python面向对象程序设计之私有变量,私有方法原理与用法分析
2020/03/23 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
用python绘制樱花树
2020/10/09 Python
详解Python中@staticmethod和@classmethod区别及使用示例代码
2020/12/14 Python
乌克兰时尚鞋子和衣服购物网站:Born2be
2018/05/24 全球购物
精神文明建设标语
2014/06/16 职场文书
大学新生军训自我鉴定
2014/09/18 职场文书
2015年护士节活动总结
2015/02/10 职场文书
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
gateway网关接口请求的校验方式
2021/07/15 Java/Android