這里主要是使用HTML5 的File API,建立一個(gè)可存取到該file的url，一個(gè)空的img標(biāo)簽，ID為img0,把選擇的文件顯示在img標(biāo)簽中，實(shí)現(xiàn)圖片預(yù)覽功能。請選擇支持HTML API的瀏覽器，比如谷歌Chrome和火狐等。

運(yùn)行效果如下圖所示：

在線演示地址如下：

http://demo.jb51.net/js/2015/jquery-html5-pic-upload-pre-view-codes/

具體代碼如下：

<!DOCTYPE html>
<html>
<head>
<title>HTML5上傳圖片預(yù)覽</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="jquery-1.6.2.min.js"></script>
</head>
<body>
<h3>請選擇圖片文件：JPG/GIF</h3>
<form name="form0" id="form0" >
<input type="file" name="file0" id="file0" multiple="multiple" /><br>
<img src="" id="img0" >
</form>
<script> 
$("#file0").change(function(){
 var objUrl = getObjectURL(this.files[0]) ;
 console.log("objUrl = "+objUrl) ;
 if (objUrl) {
  $("#img0").attr("src", objUrl) ;
 }
}) ;
//建立一個(gè)可存取到該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程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)用技巧必備（下）
這篇文章主要介紹了jQuery必不可少的小技巧，這些小技巧就像是創(chuàng)建的快捷方式，可以幫助大家快速開發(fā)，感興趣的小伙伴們可以參考一下
2015-11-11
jquery.validate.js插件使用經(jīng)驗(yàn)記錄
工作中使用到了jquery.validate.js插件，下面將其用法整理一下，方便以后使用
2014-07-07
用jquery實(shí)現(xiàn)學(xué)校的校歷(asp.net+jquery ui 1.72)
學(xué)校日歷有以下幾個(gè)特點(diǎn)：1顯示本周是本學(xué)期的第幾周；2顯示今日事件；3特殊顯示有事件的日期，點(diǎn)擊該日期顯示本日事件。
2010-01-01
jQuery中的事件詳解
本文詳細(xì)講解了jQuery中的事件，文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05
JQuery 選擇器、DOM節(jié)點(diǎn)操作練習(xí)實(shí)例
下面小編就為大家?guī)硪黄狫Query 選擇器、DOM節(jié)點(diǎn)操作練習(xí)實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
js/jquery判斷瀏覽器類型的方法小結(jié)
有些時(shí)候需要根據(jù)瀏覽器來寫樣式，所以要判斷一下瀏覽器類型，百度了一下，才知道JQuery有個(gè)方法直接判斷，并附上原生的js的判斷方法，分享給大家，有需要的小伙伴可以參考下。
2015-05-05
使用 jQuery 實(shí)現(xiàn)表單驗(yàn)證功能
表單作為 HTML 最重要的一個(gè)組成部分，幾乎在每個(gè)網(wǎng)頁上都有體現(xiàn)，例如用戶提交信息、用戶反饋信息和用戶查詢信息等，因此它是網(wǎng)站管理者與瀏覽者之間溝通的橋梁。下面通過實(shí)例代碼給大家介紹jQuery 實(shí)現(xiàn)表單驗(yàn)證功能
2017-07-07
jQuery網(wǎng)頁版打磚塊小游戲源碼分享
這篇文章主要展示了jQuery網(wǎng)頁版打磚塊小游戲源碼，大家都一定玩過打磚塊這款小游戲，今天我們不僅要玩轉(zhuǎn)它，還要實(shí)現(xiàn)打磚塊小游戲，感興趣的小伙伴們可以參考一下
2015-08-08
jQuery實(shí)現(xiàn)圖片滑動(dòng)效果
本文主要介紹了jQuery實(shí)現(xiàn)圖片滑動(dòng)效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
2017-03-03
jQuery操作表格（table）的常用方法、技巧匯總
雖然現(xiàn)在DIV+CSS進(jìn)行頁的布局大行其道，但是很多地方使用table還是有很多優(yōu)勢，用table展示數(shù)據(jù)是比較方便的，下面匯總了jQuery操作Table tr td常用的方法，熟記這些操作技巧，下次再使用的到時(shí)候，會讓你如魚得水，提高開發(fā)效率
2014-04-04