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

來源:互聯網
上載者:User
[原]使用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
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.