Sencha Touch - 上传和下载

Sencha Touch是一个用于构建跨平台移动应用程序的HTML5框架。它提供了丰富的组件和工具，方便开发人员快速创建功能强大的移动应用程序。本文将介绍如何在Sencha Touch中实现上传和下载功能。

上传功能

1. 添加文件选择器

首先，我们需要为用户提供一个文件选择器，让他们能够选择要上传的文件。可以使用Ext.field.File组件来实现文件选择器。以下是一个示例代码片段：

{
    xtype: 'filefield',
    label: '选择文件',
    name: 'file',
    listeners: {
        change: function(filefield, value, eOpts) {
            // 当文件选择器值改变时触发的事件
        }
    }
}

2. 处理文件上传

一旦用户选择了要上传的文件，我们需要将其发送到服务器进行处理。可以使用Ext.Ajax类来发送上传请求。以下是一个示例代码片段：

var form = // 获取包含文件选择器的表单
var fileField = form.down('filefield');
var file = fileField.getFile();

var formData = new FormData();
formData.append('file', file);

Ext.Ajax.request({
    url: 'upload.php', // 服务器端处理文件上传的URL
    method: 'POST',
    rawData: formData,
    success: function(response) {
        // 文件上传成功的处理逻辑
    },
    failure: function(response) {
        // 文件上传失败的处理逻辑
    }
});

3. 服务器端处理文件上传

在服务器端，我们需要处理接收到的文件并进行相应的逻辑操作。具体的实现方式将根据你使用的服务器端技术而有所不同。以下是一个简单的PHP示例：

$uploadedFile = $_FILES['file'];
$filename = $uploadedFile['name'];
$tmpName = $uploadedFile['tmp_name'];

move_uploaded_file($tmpName, 'uploads/' . $filename);

下载功能

1. 创建下载链接

要允许用户下载文件，我们可以创建一个下载链接，并将文件的URL作为链接目标。以下是一个示例代码片段：

{
    xtype: 'button',
    text: '下载文件',
    handler: function() {
        window.location.href = 'download.php?file=' + encodeURIComponent('path/to/file.pdf');
    }
}

2. 服务器端处理下载请求

在服务器端，我们需要处理下载请求，并将文件发送回客户端。具体的实现方式将根据你使用的服务器端技术而有所不同。以下是一个简单的PHP示例：

$filename = $_GET['file'];
$file = 'path/to/' . $filename;

header('Content-Type: application/octet-stream');
header('Content-Transfer-Encoding: Binary');
header('Content-disposition: attachment; filename="' . basename($file) . '"');
readfile($file);

以上就是在Sencha Touch中实现上传和下载功能的基本步骤。根据你的具体需求和环境，可能会有所调整，但这些代码片段将指导你在Sencha Touch应用程序中实现这些功能。