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用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
Nov 09 jQuery
webpack写jquery插件的环境配置
Dec 21 jQuery
jQuery niceScroll滚动条错位问题的解决方法
Feb 03 jQuery
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 jQuery
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
jQuery操作attr、prop、val()/text()/html()、class属性
May 23 jQuery
jQuery模仿ToDoList实现简单的待办事项列表
Dec 30 jQuery
jquery实现垂直手风琴导航栏
Feb 18 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实现读取一个1G的文件大小
2013/08/24 PHP
php中getservbyport与getservbyname函数用法实例
2014/11/18 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
workerman结合laravel开发在线聊天应用的示例代码
2018/10/30 PHP
Smarty模板配置实例简析
2019/07/20 PHP
真正的JQuery.ajax传递中文参数的解决方法
2011/05/28 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
2015/08/06 Javascript
详解JavaScript编程中的数组结构
2015/10/24 Javascript
js+canvas绘制五角星的方法
2016/01/28 Javascript
jQuery Mobile 和 Kendo UI 的比较
2016/05/05 Javascript
AngularJS动态绑定HTML的方法分析
2016/11/07 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
2018/07/06 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
javascript获取元素的计算样式
2019/05/24 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
JavaScript如何操作css
2020/10/24 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
用Python计算三角函数之atan()方法的使用
2015/05/15 Python
举例区分Python中的浅复制与深复制
2015/07/02 Python
Python压缩解压缩zip文件及破解zip文件密码的方法
2015/11/04 Python
python3解析库lxml的安装与基本使用
2018/06/27 Python
pandas重新生成索引的方法
2018/11/06 Python
Python Django 封装分页成通用的模块详解
2019/08/21 Python
解决python gdal投影坐标系转换的问题
2020/01/17 Python
谈一谈数组拼接tf.concat()和np.concatenate()的区别
2020/02/07 Python
python 字符串的驻留机制及优缺点
2020/06/19 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
预订奥兰多和佛罗里达州公园门票:FloridaTix
2018/01/03 全球购物
学习张丽丽心得体会
2014/09/03 职场文书
四风问题个人对照检查材料
2014/09/26 职场文书
保送生自荐信范文
2015/03/26 职场文书
汉字听写大会观后感
2015/06/12 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
python实现股票历史数据可视化分析案例
2021/06/10 Python