Sencha Touch - 上傳和下載

Sencha Touch 提供 XHR2 配置，用於處理 Ajax 和 Ajax2 開發。

XHR2 是 xmlHttpRequest 2.0 版本，用於向伺服器請求資料。對於任何 Web 應用程式，資料都駐留在伺服器上，頁面載入後，應使用 Ajax 請求從伺服器訪問資料。

Sencha Touch 中的 XHR2 提供了進度條功能，用於向用戶顯示特定請求傳輸的資料量。XHR2 是新新增的，因此我們需要檢查瀏覽器是否支援它。

以下是檢查瀏覽器是否支援 XHR2 的函式：

if (Ext.feature.has.XHR2) {
   // Here we can write functionality to work if browser supports XHR2 
}

我們甚至可以檢查瀏覽器是否支援使用 XHR2 的漸進式上傳。

if (Ext.feature.has.XHRUploadProgress) {
   // Here we can write functionality to work if browser supports progressive uploads
}

Sencha Touch 中包含各種新的 XHR2 功能。

序號	功能和描述
1	XHR2: true 用於啟用和停用應用程式中的 XHR2 功能。
2	Ext.field.File 新增新的檔案欄位以提供有關欄位型別的更多資訊。
3	Ext.field.FileInput 用於提供 FileInput。
4	Ext.progressIndicator 用於以進度條的形式提供已傳輸資料的精確百分比。
5	xtype: fileinput 建立 fileInput 類例項。
6	xtype: filefield 建立 file 類例項。
7	responseType : value 此引數允許各種型別的響應，例如文字、文件、blob 等。

以下是使用和不使用引數傳送簡單的 Ajax 請求以及使用 Ajax 上傳檔案的示例。

簡單的無引數 Ajax 請求 - 成功

線上演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [ 'Ext.Panel', 'Ext.Button', 'Ext.form.Panel'], onReady: function() {
               var request = {
                  url: 'https://tutorialspoint.tw/sencha_touch/index.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

將產生以下結果：

以上示例顯示了成功的 Ajax 呼叫，因為提到的 URL 是正確的。在此示例中，我們沒有傳遞任何引數，它只是一個簡單的 Ajax 請求，它會命中提到的 URL。

如果您在開發者工具中使用 Chrome 瀏覽器，請導航到網路部分，您可以看到正在傳送的請求以及我們獲得的響應。

簡單的無引數 Ajax 請求 - 失敗

線上演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],
            onReady: function() {
               var request = {
                  url: 'https://tutorialspoint.tw/sencha_touch/indexx.htm',
                  method: 'POST',
                  xhr2: true,
                  success: function(response) {
                     Ext.Msg.alert('Ajax call successful');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('Ajax call failed');
                  }
               };
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

將產生以下結果：

在上面的示例中，為了演示 Ajax 失敗的工作方式，我們提到了錯誤的 URL。比較這個示例和之前的示例，您會發現不同之處。

在 Ajax 請求中傳送引數

線上演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.Button',
               'Ext.form.Panel'
            ],

            onReady: function() {
               var formData = new FormData();
               formData.append("firstName", "Hi");
               formData.append("lastName", "Reader");

               // Request will be sent as part of the payload instead of standard post data
               var request = {
                  url: 'https://tutorialspoint.tw/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  data: formData,
                  success: function(response) {
                     var out = Ext.getCmp("output");
                     response = Ext.JSON.decode(response.responseText, true);
                     Ext.Msg.alert(response.message);
                  },
                  failure: function(response) {
                     var out = Ext.getCmp("output");
                     Ext.Msg.alert('Ajax failed!');
                  }
               };

               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"button",
                        text: "Ajax",
                        ui: 'confirm',
                        handler: function(){
                           Ext.Ajax.request(request);
                        }
                     }
                  ]
               });
            }
         });      
      </script>
   </head>
   <body>
   </body>
</html>

將產生以下結果：

在此示例中，我們使用 Ajax 呼叫的 data 屬性傳遞引數。

使用 Ajax 上傳檔案

線上演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.setup({
            requires: [
               'Ext.Panel',
               'Ext.MessageBox',
               'Ext.Button',
               'Ext.ProgressIndicator',
               'Ext.form.Panel',
               'Ext.field.FileInput'
            ],

            onReady: function() {
               var progressIndicator = Ext.create("Ext.ProgressIndicator", {
                  loadingText: "Uploading: {percent}%"
               });

               var request = {
                  url: 'https://tutorialspoint.tw/sencha_touch/sencha_json.php',
                  method: 'POST',
                  xhr2: true,
                  progress:progressIndicator,
                  success: function(response) {
                     Ext.Msg.alert('File uploaded successfully.');
                  },
                  failure: function(response) {
                     Ext.Msg.alert('File upload failed.');
                  }
               };

               Ext.Viewport.add(progressIndicator);
               Ext.Viewport.add({
                  xtype:"panel",
                  layout:"vbox",
                  fullscreen:true,
                  items: [
                     {
                        xtype:"fileinput",
                        accept:"image/jpeg"
                     },
                     {
                        xtype:"button",
                        text: "Upload",
                        ui: 'confirm',
                        handler: function(){
                           var input = Ext.Viewport.down("fileinput").input;
                           var files = input.dom.files;
                           if (files.length) {
                              request.binaryData = files[0];
                              Ext.Ajax.request(request);
                           }else {
                              Ext.Msg.alert("Please Select a JPG");
                           }
                        }
                     }
                  ]
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

將產生以下結果：

此示例演示如何使用 Ajax 呼叫上傳資料。在此示例中，我們使用進度條指示器來顯示上傳檔案時的進度。

列印頁面