亲宝软件园·资讯

展开

jQuery上传图片显示预览功能 简单实现jQuery上传图片显示预览功能

小白爱吃猪头肉 人气:0
想了解简单实现jQuery上传图片显示预览功能的相关内容吗,小白爱吃猪头肉在本文为您仔细讲解jQuery上传图片显示预览功能的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:jQuery上传图片显示预览,jQuery上传图片预览,jQuery上传预览,下面大家一起来学习吧。

<!DOCTYPE html>
<html>
<head>
 <title>HTML5上传图片预览</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <script src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script>
 <style>
  .hide
  {
   display:none;
  }
 </style>
</head>
<body>
<h3>请选择图片文件:JPG/GIF</h3>
<form name="form0" id="form0" >
 <input type="file" name="file0" id="file0" multiple="multiple" />
 <br><br><img src="" id="img0" width="120" class="hide">
</form>
<script>
 $("#file0").change(function(){
  var objUrl = getObjectURL(this.files[0]) ;
  console.log("objUrl = "+objUrl) ;
  if (objUrl) 
  {
   $("#img0").attr("src", objUrl);
   $("#img0").removeClass("hide");
  }
 }) ;
 //建立一個可存取到該file的url
 function getObjectURL(file) 
 {
  var url = null ;
  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>

加载全部内容

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