Stylet 小豬圈: YUI 非同步的傳案上傳

2008-10-05

YUI 非同步的傳案上傳

使用 YUI Connection Manager 實作。
觸發事件不用 button.onClick 而用 form.onSubmit，其中一個考量是避免遺漏使用者以「按下 Enter 」的方式送出表單。
在關閉 Javascript 的情況下，也能一般的方式送出表單內容。
同時使用 POST 與 GET (自行在 URL 後附加參數)，來判斷資料是由 AJAX 還是一般方式送出(瀏覽器有無支援 Javascript)。前者可以送出 JSON 編碼的資料方便用 Javascript 處理，而後者就出一般的網頁。

async_file_upload.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="Content-Language" content="zh-TW">
    <title>Asynchronous File Upload With YUI 非同步檔案上傳</title>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/yahoo-dom-event/yahoo-dom-event.js"></script> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/connection/connection-min.js"></script> 
    <script type="text/javascript" src="http://yui.yahooapis.com/2.6.0/build/json/json-min.js"></script> 
    <script type="text/javascript">
      function doSubmit(objForm){
        // 第二個參數設成 true 允許檔案上傳
        YAHOO.util.Connect.setForm(objForm, true);
        var callback = {
          upload: function(o) {
            var result = YAHOO.lang.JSON.parse(o.responseText);
            document.getElementById('log').innerHTML =
              'name: ' + result.name + '<br>\n' +
              'type: ' + result.type + '<br>\n' +
              'size: ' + result.size + '<br>\n' +
              'tmp_name: ' + result.tmp_name + '<br/>\n' +
              'error: ' + result.error + '<br>\n';
          }
        };
        // 同時使用 POST 與 GET (async) 判斷資料是由 AJAX 或表單直接送出 
        YAHOO.util.Connect.asyncRequest('POST', objForm.action + '?async=1', callback);
        // 這裡傳回 false 並不能阻止 submit (原因未知)
        return false;
      }
    </script>
  </head>
  <body>
    <!-- 在 onSubmit 呼叫 doSubmit 後再傳回 false 避免以一般方式送出表單  -->
    <form id="form_1" action="async_file_upload_action.php" enctype="multipart/form-data" method="post" onsubmit="doSubmit(this); return false;" >
    <div>
      <input type="file" id="input_file_1" name="input_file_1">
      <input type="submit" id="input_submit_1" name="input_submit_1">
    </div>
    </form>
    <pre id="log"></pre>
  </body>
</html>

async_file_upload_action.php:

<?php
  if (isset($_GET['async'])) {
    echo json_encode($_FILES['input_file_1']);
  } else {
    echo '<pre>', print_r($_FILES, true), '</pre>';
  }  
?>

Yahoo! UI Library: Connection Manager The Callback Object and File Upload
Asynchronous File Upload - YUI's Approach | Code Central

Stylet 小豬圈

2008-10-05

YUI 非同步的傳案上傳

No comments:

Post a Comment

標籤分類

Blog Archive

個人常用鏈結

Labels

Google Analytics Tracking Code

About Me