亲宝软件园·资讯

展开

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

喜欢海呀 人气:0
想了解html5以及jQuery实现本地图片上传前的预览代码实例讲解的相关内容吗,喜欢海呀在本文为您仔细讲解html5以及jQuery实现本地图片上传前的预览的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:jQuery实现本地图片上传前预览,jQuery本地图片上传预览,下面大家一起来学习吧。

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


这里写图片描述

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


这里写图片描述

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

<!DOCTYPE html> 
<html> 
<head> 
<title>HTML5上传图片预览</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script src="//www.qb5200.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> 

加载全部内容

相关教程
猜你喜欢
用户评论