jQuery實現(xiàn)圖片即時上傳 附完整源代碼
來源：程序員人生 發(fā)布時間：2014-05-29 08:30:50 閱讀次數(shù)：3013次
最近看了一些jQuery即時上傳的插件，總算看懂了些門路。現(xiàn)將其最為核心的一部分抽取出來，以期用最簡單的例子來說明jQuery圖片即時上傳的原理。
首先本用例一共包含3個文件:
1、上傳面板HTML文件。
2、上傳處理PHP文件。
3、jQuery庫。
第一、上傳面板HTML文件(index.html)。
其主要包含了jQuery庫、即時上傳所需js、表單和iframe框架。下面是其源碼，其中已附詳細(xì)注釋。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Upload Image</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<!--<script type="text/javascript" src="jquery-1.6.2.min.js"></script>--> <!-- 本地jquery庫-->
<script type="text/javascript" src="http://files.cnblogs.com/Zjmainstay/jquery-1.6.2.min.js"></script>
</head>
<body>
<style>
#exec_target{display:none;width:0;height:0;}
#feedback{width:1200px;margin:0 auto;}
#feedback img{float:left;width:300px;height:300px;}
</style>
<script type="text/javascript">
$(document).ready(function(){
//選擇文件成功則提交表單
$("#upload_file").change(function(){
if($("#upload_file").val() != '') $("#submit_form").submit();
});
//iframe加載響應(yīng)，初始頁面時也有一次，此時data為null。
$("#exec_target").load(function(){
var data = $(window.frames['exec_target'].document.body).find("textarea").html();
//若iframe攜帶返回數(shù)據(jù)，則顯示在feedback中
if(data != null){
$("#feedback").append(data.replace(/</g,'<').replace(/>/g,'>'));
$("#upload_file").val('');
}
});
});
</script>
<form id="submit_form" method="post" action="submit_form_process.php" target="exec_target" enctype="multipart/form-data">
<input type="file" name="upload_file" id="upload_file"> <!-- 添加上傳文件 -->
</form>
<iframe id="exec_target" name="exec_target"></iframe> <!-- 提交表單處理iframe框架 -->
<div id="feedback"></div> <!-- 響應(yīng)返回數(shù)據(jù)容器 -->
</body>
</html>
第二、上傳處理PHP文件(submit_form_process.php)。
其主要包含了圖片文件的簡單上傳，及返回圖片標(biāo)簽<img>，其中存儲剛上傳的圖片。下面是其源碼。
<?php
header('content-type:text/html charset:utf-8');
//不存在當(dāng)前上傳文件則上傳
if(!file_exists($_FILES['upload_file']['name'])) move_uploaded_file($_FILES['upload_file']['tmp_name'],iconv('utf-8','gb2312',$_FILES['upload_file']['name']));
//輸出圖片文件<img>標(biāo)簽
echo "<textarea><img src='{$_FILES['upload_file']['name']}'/></textarea>";
//End_php
總結(jié)之原理透析：
講到j(luò)Query即時上傳，不知道其原理的人第一想法一般都是使用AJAX，我也嘗試過。但是，由于上傳文件不同于一般數(shù)據(jù)的POST，它需要表單form的提交來完成。因此，jQuery上傳插件也是將<input type="file">的數(shù)據(jù)轉(zhuǎn)至一個新生的form當(dāng)中將其提交，而表單的target指向新生的iframe，在iframe中做表單提交后的處理，完成后iframe會重新加載并包含處理結(jié)果，通過iframe的load事件便可捕捉并獲取處理結(jié)果，回傳至原表單所在的頁面（feedback）中，實現(xiàn)jQuery即時上傳的效果。而在表單提交的時候，為了實現(xiàn)選擇文件后即時提交表單，則使用了input標(biāo)簽的change事件(index.html L19-21)，只要選擇了文件，input的值就會發(fā)生變化，此時就可以提交表單進(jìn)行處理了。
下載：最簡單的jQuery即時上傳示例
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈
