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


这里写图片描述

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


这里写图片描述

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

<!DOCTYPE html> 
<html> 
<head> 
<title>HTML5上传图片预览</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<script src="https://www.jb51.net/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实现本地图片上传前的预览内容请搜索乐虎体育以前的文章或继续浏览下面的相关文章希望大家以后多多支持乐虎体育!

html5以及jQuery实现本地图片上传前的预览代码实例讲解的更多相关文章

  1. input标签checkbox选中触发事件的方法

    1.方法一function checkboxOnclick(checkbox){ if ( checkbox.che......

  2. HTML5中的Web Notification桌面通知

    一、传统的通知实现通知可以说是web中比较常见且重要的功能,私信、在线提问、或者一些在线即时通讯工具我们总是希望第一......

  3. 如何在vue中使用HTML 5 拖放API

    拖放 API 将可拖动元素添加到 HTML,使我们可以构建包含可以拖动的具有丰富 UI 元素的 Web 应用。在本文......

  4. 网页小实验——用canvas生成精灵动画图片

    实验目标:借助canvas把一张国际象棋棋子图片转换为一组适用于WebGL渲染的精灵动画图片,不借助其他图片处理工具......

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

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

  6. select下拉框option的样式修改

    select原样式:进行样式修改后的样式: 附上修改代码://select外面必须包裹一个div,用来覆盖sel......

  7. HTML5与CSS3知识点总结

    HTML常用标签总结 手摸手带你学CSS 好好学习,天天向上本文已收录至我的Github仓库DayDayUP:git......

随机推荐

  1. C#实现简单的五子棋游戏

    最近利用业余时间写了一个简单的五子棋游戏,没有利用深层次的面向对象技术,自学一年,代码和程序设计有不妥之处,还望大神......

  2. msxml3.dll 错误 800c0019 系统错误:-2146697191解决方法

    一个asp后台使用了XMLHTTP组件的页面无法无法生成静态页面了,运行时提示"msxml3.dll 错误......

  3. vue 递归组件的简单使用示例

    前言递归 相信很多同学已经不陌生了,算法中我们经常用递归来解决问题。比如经典的:从一个全为数字的数组中找出其中相加能......

  4. telnet 命令使用方法大全

    什么是Telnet?对于Telnet的认识,不同的人持有不同的观点,可以把Telnet当成一种通信协议,但是对于入侵......

  5. Java中EasyPoi导出复杂合并单元格的方法

    前言:上星期做了一个Excel的单元格合并,用的是EasyPoi,我之前合并单元格都是原生的,第一次使用EasyPo......

  6. 用OpenCV进行年龄和性别检测的实现示例

    本文主要介绍了用OpenCV进行年龄和性别检测的实现示例,分享给大家,具体如下:在本文中,我将带您完成用 Pytho......

  7. python基于opencv实现人脸识别

    将opencv中haarcascade_frontalface_default.xml文件下载到本地,我们调用它辅助......

  8. C/C++内存对齐详解

    1、什么是内存对齐 还是用一个例子带出这个问题,看下面的小程序,理论上,32位系统下,int占4byte,c......

  9. 前端 javascript 实现文件下载的示例

    在 html5 中,a 标签新增了 download 属性,包含该属性的链接被点击时,浏览器会以下载文件方式下载 h......

  10. Wi-Fi 6 与 5G 相比哪个更快?

    随着 iPhone12 的发布,iOS 系统正式开始拥抱 5G,智能手机全面进入了 5G 时代。伴随着各大运营商的 ......