html5以及jQuery實現(xiàn)本地圖片上傳前的預(yù)覽代碼實例講解

更新時間：2021年03月01日 16:49:44 作者：喜歡海呀

這篇文章主要介紹了html5以及jQuery實現(xiàn)本地圖片上傳前的預(yù)覽代碼實例講解，圖文代碼實例講解的很清晰，有感興趣的同學(xué)可以研究下

html5以及jQuery實現(xiàn)本地圖片上傳前的預(yù)覽，效果類似如下：
選擇圖片前的頁面：

這里寫圖片描述

選擇圖片之后的預(yù)覽效果：

這里寫圖片描述

下面直接上代碼（只是最簡單的實現(xiàn)代碼，css樣式?jīng)]有復(fù)制，自己隨意發(fā)揮）

<!DOCTYPE html> 
<html> 
<head> 
<title>HTML5上傳圖片預(yù)覽</title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script src="http://chabaoo.cn/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是自定義的函數(shù)，見下面 
  // 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 ; 
  // 下面函數(shù)執(zhí)行的效果是一樣的，只是需要針對不同的瀏覽器執(zhí)行不同的 js 函數(shù)而已 
  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>

到此這篇關(guān)于html5以及jQuery實現(xiàn)本地圖片上傳前的預(yù)覽代碼實例講解的文章就介紹到這了,更多相關(guān)html5以及jQuery實現(xiàn)本地圖片上傳前的預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: