使用ajaxfileupload.js外掛程式實現Ajax方式上傳檔案

[原]使用ajaxfileupload.js外掛程式實現Ajax方式上傳檔案
linuxing , 17:52 ,
編程 »
JavaScript ,
評論(3) , 引用(0) ,
閱讀(16636) , Via 本站原創 大 | 中 | 小
引用地址：

注意： 該地址僅在今日23:59:59之前有效    無論是PHP，還是其他的服務端指令碼都提供了檔案上傳功能，實現起來也比較簡單。而利用JavaScript來配合，即可實現Ajax方式的檔案上傳。雖然jQuery本身沒有提供這樣的簡化函數，但有不少外掛程式可以實現。其中，Phpletter.com提供的ajaxfileupload.js是一個輕量的外掛程式，而且編寫方式與jQuery提供的全域方法$.post()非常相似，簡單易用。
    不過，該外掛程式實在太簡化了，除了可提供需上傳檔案的路徑外，也就不能傳遞額外的值到後台服務端。所以，我修改了一下該指令碼，增加個一個data對象參數。

一、原理
我這裡使用的是PHP作為服務端指令碼，幾乎在每本較少PHP的書上都會提到如何使用move_uploaded_file()方法來上傳檔案，這裡我就不再細說了。我想說的是，利用Ajax上傳的原理。
因為一直在使用jQuery庫，所以當想到Ajax時，第一反應就是試試$.post()方法，利用各選取器得到file檔案框中的value值，然後提交到後台服務端。當然，後來證明這是不行的。（正因為這問題，我還查了不少資料，網上還提供了不少ASP等方式的指令碼，真不知道該說什麼好。。）
回到正題，要實現Ajax方式上傳，其實並不難，方法也有不少。而本文提到的Phpletter.com的ajaxfileupload.js外掛程式就是使用iframe的方式。這也是在不使用JavaScript指令碼時，要實現不重新整理頁面上傳時常見的方法。（本部落格bo-blog後台撰寫日誌就是用該方法）
而ajaxfileupload.js外掛程式也很簡單，就是先利用jQuery的選取器獲得file檔案上傳框中的檔案路徑值，然後動態建立一個iframe，並在裡面建立一個新的file 檔案框，提供post方式提交到後台。最後，返回結果到前台。

二、使用
ajaxfileupload.js外掛程式的使用很簡單。
前台HTML代碼類似：

<script type="text/javascript">
$(#buttonUplod).click(function () {
  $.ajaxFileUpload ({
    url:'doajaxfileupload.php', //你處理上傳檔案的服務端
    secureuri:false, //與頁面處理代碼中file相對應的ID值
    fileElementId:'img',
    dataType: 'json', //返回資料類型:text，xml，json，html,scritp,jsonp五種
    success: function (data) {
      alert(data.file_infor);
    }
  })
});
</script>
<input id="img" type="file" size="45" name="img" class="input">
<button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button>

後台doajaxfileupload.php指令碼：

<?php
  $upFilePath = "../attachment/";
  $ok=@move_uploaded_file($_FILES['img']['tmp_name'],$upFilePath);
  if($ok === FALSE){
    echo json_encode('file_infor'=>'上傳失敗');
  }else{
    echo json_encode('file_infor'=>'上傳成功');
  }
?>

為了測試，可以使用類似下面的方式儲存傳遞過來的變數值：

$file_info = var_export($_FILES,true);
$ok = file_put_contents("../attachment/file_info.txt",$file_info);
if ($ok) exit(json_encode('file_infor'=>'上傳成功'));
exit (json_encode('file_infor'=>'上傳失敗'));

※ 注意
請留意HTML代碼檔案框中的標記：引用1. id='img'是用於給ajaxfileupload.js外掛程式的fileElementId:'img'識別的，jQuery選取器會利用該字串獲得文字框的值；
2. name='img'是用於通過post方式提交到後台指令碼時，PHP通過$_FILES['img']讀取上傳檔案的資料，若沒有該值，$_FILES變數為空白；

所以，這兩個值缺一不可，也不可混淆。

三、支援額外參數
有時候，我們需要在後台根據某些變數來覺得對上傳檔案的處理。例如，更新檔案。這時，就需要往同台再傳遞一些額外的參數。所以，我修改了ajaxfileupload.js外掛程式：

引用addOtherRequestsToForm: function(form,data)
{
  // add extra parameter
  var originalElement = $('<input type="hidden" name="" value="">');
  for (var key in data) {
    name = key;
    value = data[key];
    var cloneElement = originalElement.clone();
    cloneElement.attr({'name':name,'value':value});
    $(cloneElement).appendTo(form);
  }
  return form;
},

ajaxFileUpload: function(s) {
  // TODO introduce global settings, allowing the client to modify them for all requests, not only timeout    
  s = jQuery.extend({}, jQuery.ajaxSettings, s);
  var id = new Date().getTime()        
  var form = jQuery.createUploadForm(id, s.fileElementId);
  if ( s.data ) form = jQuery.addOtherRequestsToForm(form,s.data);
  var io = jQuery.createUploadIframe(id, s.secureuri);

紅色標記部分是我添加的內容。這樣，我就可以在前台HTML部分，通過類似下面的代碼來傳遞額外的參數：

url:'doajaxfileupload.php', //你處理上傳檔案的服務端
secureuri:false, //與頁面處理代碼中file相對應的ID值
data:{'test':'test','ok':'ok'}, //以對象的方式傳遞，內容部分可輸入JavaScript的變數值
fileElementId:'img',

幕後處理指令碼為：

array_push($_FILES,$_REQUEST);
$file_info = var_export($_FILES,true);
$ok = file_put_contents("../attachment/file_info.txt",$file_info);
if ($ok) exit(json_encode('file_infor'=>'上傳成功'));
exit (json_encode('file_infor'=>'上傳失敗'));

可見，原理很簡單，就是把額外的data對象內容一同加到iframe下的form中，傳遞到後台PHP指令碼，以$_REQUEST等變數獲得這些值。
後台輸出保留的file_info.txt內容如下：引用array (
  'file' =>
  array (
    'name' => 'firefox-java.txt',
    'type' => 'text/plain',
    'tmp_name' => 'D:\\Tools\\xampp\\tmp\\phpED45.tmp',
    'error' => 0,
    'size' => 250,
  ),
  0 =>
  array (
    'test' => 'test',
    'ok' => 'ok',
    'PHPSESSID' => 'e379fd4fb2abca6e802a1302805a5535',
  ),
)

有了這些內容，相信後續的PHP指令碼處理將不困難，這裡也就不再一一說明了。
Demo代碼下載：

下載檔案點擊這裡下載檔案

修改過的ajaxfileupload.js外掛程式：

下載檔案點擊這裡下載檔案

四、附錄
提供Ajax上傳檔案的jQuery外掛程式有不少，除了利用iframe方式外，還有以Flash方式實現上傳的，該方式還可提供進度條的顯示。
http://www.uploadify.com/
http://valums.com/ajax-upload/
http://www.fyneworks.com/jquery /multiple-file-upload/

相關日誌
[轉]jQuery 的toggle()方法在IE 8 的<tr>失效的問題
[原]jQuery中html()方法在IE 和 FireFox 的差別
[轉] jQuery 選取器
[原] jQuery介紹Tags:
jquery ,
plugins ,
upload