简单实现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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# jQuery上传图片显示预览 # jQuery上传图片预览 # jQuery上传预览 # Jquery ajaxsubmit上传图片实现代码 # 基于jquery实现的上传图片及图片大小验证、图片预览效果代码 # jquery的ajaxSubmit()异步上传图片并保存表单数据演示代码 # jquery 批量上传图片实现代码 # 使用jQuery实现验证上传图片的格式与大小 # jQuery AjaxUpload 上传图片代码 # JQuery+ajax实现批量上传图片(自写) # jQuery实现上传图片前预览效果功能 # 基于Jquery插件Uploadify实现实时显示进度条上传图片 # jquery实现上传图片功能 # 上传图片 # 请选择 # 大家分享 # 具体内容 # 大家多多 # src # script # UTF # content # Type # charset # text # hide # style # body # display # min # jquery # js

返回目录在线咨询

上一篇：SEO优化中如何选择合适的工具_SEO优化教程
下一篇：JS实现问卷星自动填问卷脚本并在两秒自动提交功能

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求