最近看了一些jQuery即時(shí)上傳的插件，總算看懂了些門(mén)路?，F(xiàn)將其最為核心的一部分抽取出來(lái)，以期用最簡(jiǎn)單的例子來(lái)說(shuō)明jQuery圖片即時(shí)上傳的原理。
首先本用例一共包含3個(gè)文件:
1、上傳面板HTML文件。
2、上傳處理PHP文件。
3、jQuery庫(kù)。
第一、上傳面板HTML文件（index.html)。
其主要包含了jQuery庫(kù)、即時(shí)上傳所需js、表單和iframe框架。下面是其源碼，其中已附詳細(xì)注釋。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jQuery Upload Image</title> 5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 6 <meta http-equiv="Content-Language" content="zh-CN" /> 7 <!--<script type="text/javascript" src="jquery-1.6.2.min.js"></script>--> <!-- 本地jquery庫(kù)--> 8 <script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script> 9 </head> 10 <body> 11 <style> 12 #exec_target{display:none;width:0;height:0;} 13 #feedback{width:1200px;margin:0 auto;} 14 #feedback img{float:left;width:300px;height:300px;} 15 </style> 16 <script type="text/javascript"> 17 $(document).ready(function(){ 18 //選擇文件成功則提交表單 19 $("#upload_file").change(function(){ 20 if($("#upload_file").val() != '') $("#submit_form").submit(); 21 }); 22 //iframe加載響應(yīng)，初始頁(yè)面時(shí)也有一次，此時(shí)data為null。 23 $("#exec_target").load(function(){ 24 var data = $(window.frames['exec_target'].document.body).find("textarea").html(); 25 //若iframe攜帶返回?cái)?shù)據(jù)，則顯示在feedback中 26 if(data != null){ 27 $("#feedback").append(data.replace(/</g,'<').replace(/>/g,'>')); 28 $("#upload_file").val(''); 29 } 30 }); 31 }); 32 </script> 33 <form id="submit_form" method="post" action="submit_form_process.php" target="exec_target" enctype="multipart/form-data"> 34 <input type="file" name="upload_file" id="upload_file"> <!-- 添加上傳文件 --> 35 </form> 36 <iframe id="exec_target" name="exec_target"></iframe> <!-- 提交表單處理iframe框架 --> 37 <div id="feedback"></div> <!-- 響應(yīng)返回?cái)?shù)據(jù)容器 --> 38 </body> 39 </html>
第二、上傳處理PHP文件(submit_form_process.php)。
其主要包含了圖片文件的簡(jiǎn)單上傳，及返回圖片標(biāo)簽<img>，其中存儲(chǔ)剛上傳的圖片。下面是其源碼。
1 <?php 2 header('content-type:text/html charset:utf-8'); 3 //不存在當(dāng)前上傳文件則上傳 4 if(!file_exists($_FILES['upload_file']['name'])) move_uploaded_file($_FILES['upload_file']['tmp_name'],iconv('utf-8','gb2312',$_FILES['upload_file']['name'])); 5 //輸出圖片文件<img>標(biāo)簽 6 echo "<textarea><img src='{$_FILES['upload_file']['name']}'/></textarea>"; 7 //End_php
總結(jié)之原理透析：
講到j(luò)Query即時(shí)上傳，不知道其原理的人第一想法一般都是使用AJAX，我也嘗試過(guò)。但是，由于上傳文件不同于一般數(shù)據(jù)的POST，它需要表單form的提交來(lái)完成。因此，jQuery上傳插件也是將<input type="file">的數(shù)據(jù)轉(zhuǎn)至一個(gè)新生的form當(dāng)中將其提交，而表單的target指向新生的iframe，在iframe中做表單提交后的處理，完成后iframe會(huì)重新加載并包含處理結(jié)果，通過(guò)iframe的load事件便可捕捉并獲取處理結(jié)果，回傳至原表單所在的頁(yè)面（feedback）中，實(shí)現(xiàn)jQuery即時(shí)上傳的效果。而在表單提交的時(shí)候，為了實(shí)現(xiàn)選擇文件后即時(shí)提交表單，則使用了input標(biāo)簽的change事件(index.html L19-21)，只要選擇了文件，input的值就會(huì)發(fā)生變化，此時(shí)就可以提交表單進(jìn)行處理了。
軟件包下載：最簡(jiǎn)單的jQuery即時(shí)上傳示例
演示地址：jQuery即時(shí)上傳演示
聯(lián)系客服
