XHR2 上传和下载
许多类在使用配置对象创建（实例化）类时都有快捷名称。快捷名称称为 alias（或 xtype，如果类扩展了 Ext.Component）。别名/xtype 列在适用类的类名旁边，以便快速参考。
框架类或其成员可以指定为 private 或 protected。否则，类/成员为 public。Public、protected 和 private 是访问描述符，用于传达类或类成员应如何以及何时使用。
Public 类和类成员可供任何其他类或应用程序代码使用，并且在主要产品版本中可以作为稳定且持久的依赖项。公共类和成员可以通过子类安全地扩展。
Protected 类成员是稳定的 public 成员，旨在供拥有类或其子类使用。受保护的成员可以通过子类安全地扩展。
Private 类和类成员在框架内部使用，不供应用程序开发人员使用。私有类和成员可能会在任何时候更改或从框架中省略，恕不另行通知，并且不应在应用程序逻辑中依赖它们。
static 标签。*请参阅下面的静态。下面是一个示例类成员，我们可以对其进行剖析以显示类成员的语法（在本例中是从 Ext.button.Button 类查看的 lookupComponent 方法）。
让我们看一下成员行的每个部分
lookupComponent）( item )）Ext.Component）。对于不返回除 undefined 之外的任何内容的方法，可能会省略此项，或者可能会显示为多个可能的值，并用正斜杠 / 分隔，表示返回的内容可能取决于方法调用的结果（即，如果 get 方法调用成功，方法可能会返回 Component，如果失败，则返回 false，这将显示为 Ext.Component/Boolean）。PROTECTED - 请参阅下面的标志部分）Ext.container.Container）。如果成员源自当前类，则源类将显示为蓝色链接，如果从祖先类或混合类继承，则显示为灰色。view source）item : Object）列出。undefined 之外的值，则“返回值”部分将注明返回的类或对象类型以及描述（示例中为 Ext.Component）Available since 3.4.0 - 示例中未显示）紧跟在成员描述之后Defaults to: false）API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以由文本标签、缩写或图标表示。
classInstance.method1().method2().etc();false，则标记为可阻止的事件将不会触发- 表示框架类
- 单例框架类。*有关更多信息，请参阅单例标志
- 组件类型的框架类（Ext JS 框架中扩展 Ext.Component 的任何类）
- 表示类、成员或指南在当前查看的版本中是新的
- 表示类型为 config 的类成员
- 表示类型为 property 的类成员
- 表示类型为 method 的类成员
- 表示类型为 event 的类成员
- 表示类型为 theme variable 的类成员
- 表示类型为 theme mixin 的类成员
- 表示类、成员或指南在当前查看的版本中是新的
在 API 文档页面的类名下方，是一行按钮，对应于当前类拥有的成员类型。每个按钮显示按类型划分的成员计数（此计数在应用过滤器时更新）。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示该类型的所有成员的弹出菜单，以便快速导航。
与类配置选项相关的 Getter 和 setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中，就在它们所作用的配置下方。Getter 和 setter 方法文档将在配置行中找到，以便于参考。
您的页面历史记录保存在本地存储中，并在顶部标题栏下方显示（使用可用的实际空间）。默认情况下，显示的唯一搜索结果是与您当前查看的产品/版本匹配的页面。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选按钮来展开显示的内容。这将显示所有产品/版本的所有最近页面在历史记录栏中。
在历史记录配置菜单中，您还将看到最近访问页面的列表。结果按“当前产品/版本”和“全部”单选按钮过滤。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。
如果在历史记录配置菜单中选择了“全部”，则将启用“在历史记录栏中显示产品详细信息”的复选框选项。选中后，每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也会将产品/版本显示为工具提示。
可以使用页面顶部的搜索字段搜索 API 文档和指南。
在 API 文档页面上，还有一个过滤器输入字段，该字段使用过滤器字符串过滤成员行。除了按字符串过滤外，您还可以按访问级别、继承和只读过滤类成员。这是通过使用页面顶部的复选框完成的。
API 类导航树底部的复选框过滤类列表以包含或排除私有类。
单击空的搜索字段将显示您最近 10 次搜索，以便快速导航。
每个 API 文档页面（JavaScript 原始页面除外）都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项
Ext.button.Button 类具有 Ext.Button 的备用类名）。通常维护备用类名以实现向后兼容性。可运行的示例 (Fiddle) 默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。
类成员默认在页面上折叠。您可以使用成员行左侧的箭头图标或右上角的展开/折叠所有切换按钮全局展开和折叠成员。
在较窄的屏幕或浏览器上查看文档将导致针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别在于
可以通过单击 API 文档页面顶部的类名来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。
Sencha Touch 提供了新的 xhr2 配置参数和 Ext.ProgressIndicator 类，用于 AJAX 和 AJAX2 开发。有关 XHR2 的更多信息，请参阅 XMLHttpRequest Level 2 W3C 工作草案。
Sencha Touch 中的 XHR2 提供了一个新的进度指示器，以便应用程序可以随时向用户告知数据传输进度。
有关哪些浏览器支持 XHR2 的信息，请参阅 Can I Use XHR2?。对于较旧的 Android 设备，请查看 Android 使用情况仪表板上的活动以查看趋势 - 截至撰写本文时，Android 2.2 几乎已过时，而 Android 2.3 呈下降趋势（一年前要高得多）。
您可以使用 Ext.feature.has.XHR2 测试浏览器或平台中是否存在 XHR2
if (Ext.feature.has.XHR2) {
// Provide upload and download indicators with XHR2
}
您还可以将 XHRUploadProgress 与 Ext.feature 一起使用，以确定浏览器是否支持渐进式上传
if (Ext.feature.has.XHRUploadProgress) {
// Check Browser for progressive uploads
}
新功能
XHR2 功能
| 值 | 描述 |
|---|---|
Ext.field.File |
添加了 FileField，它为文件输入提供了改进的标签和布局。 |
Ext.field.FileInput |
提供文件输入。 |
Ext.ProgressIndicator |
一个能够可视化进度（上传、下载等）的组件。此组件已集成到 Sencha Touch 数据包中，并自动与所有 AJAX 请求一起工作。 |
xtype:"filefield" |
创建 Ext.field.File 类的实例。 |
xtype:"fileinput" |
创建 Ext.field.FileInput 类的实例。 |
FormData |
较新浏览器中的对象，用于打包数据并使用 XHR2 发送数据。 示例 9 提供了其他用法。 |
responseType: "blob", |
描述服务器返回的数据类型，它可以是“text”、“document”、“arraybuffer”或“blob”。有关更多信息，请参阅 Blob。 |
xhr2: true, |
启用或禁用 XMLHttpRequest Level 2 功能。 |
以下示例从服务器请求 DOM 元素。此示例演示如何执行跨域访问服务器。该示例获取 PHP 对象并将其作为 JSON 返回。下面的代码使用 vbox 和输出面板。预览中的按钮下方是文本输出。当您单击按钮时，该示例调用 Ext.Ajax.request 函数以传入 DOM 对象。示例中的新变量是 xhr2: true，它在 Touch 中启用 XMLHttpRequest 功能。
当您不跨网络发送信息（例如提交表单或发送图像）时，xhr2 变量可以是 true 或 false - 结果是相同的。
源代码：ajax-simple.html
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/simple-json.php',
method: 'POST',
xhr2: true,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
if(response) out.setHtml(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
ajax-params 示例提供了带有两个参数的 AJAX，它将参数发布回应用程序。此应用程序由一个按钮和一个输出面板组成。在此示例中，修改了请求对象以包含这些参数
params: {
firstName: "John",
lastName: "Doe"
},
源代码：ajax-params.html
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
// Request will be sent as standard post data
onReady: function() {
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/post-json.php',
method: 'POST',
xhr2: true,
params: {
firstName: "John",
lastName: "Doe"
},
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
out.setHtml(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
在 ajax-formdata 示例中，表单数据被发送到服务器并在应用程序中接收。XHR2 支持的浏览器提供对 FormData 对象的访问，该对象将数据附加到要发送到服务器的有效负载中。在此示例中，响应为 JSON。
此代码显示了 FormData 的使用以及附加信息以创建有效负载
var formData = new FormData();
formData.append("firstName", "John");
formData.append("lastName", "Doe");
此数据以多部分表单数据的形式到达应用程序，而不是以参数的形式到达，参数以 URL 编码数据的形式传递。
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var formData = new FormData();
formData.append("firstName", "John");
formData.append("lastName", "Doe");
// Request is sent as part of the payload instead of as standard post data
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/post-json.php',
method: 'POST',
xhr2: true,
data: formData,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
out.setHtml(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
ajax-upload 示例显示了 Ext.field.FileInput 类和进度指示器的使用，用于通过 Web 将文件从您的应用程序发送到服务器。xtype:"fileinput" 创建了 Ext.field.FileInput 类的实例。
您可以像字段一样使用文件输入
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"fileinput",
accept:"image/jpeg"
},
...
在此示例中，xtype:"fileinput" 指定用户在其设备上选择的文件类型。
进度指示器显示一个图形，其中包含文本和完成活动剩余时间的百分比，或者图形列出“正在加载”。此指示器使您可以监视上传或下载传输随时间的进度。该指示器直接集成在数据包中。
var progressIndicator = Ext.create("Ext.ProgressIndicator", {
loadingText: "Uploading: {percent}%"
});
accept 参数可以是 audio、video、image 等。虽然 Sencha Touch 支持所有 MIME 媒体类型，但浏览器可能并不支持所有媒体类型。您可以使用音频、视频和图像的简短形式，在其中指定关键字，而 Touch 添加 /* - 例如
accept:"image"
与指定相同
accept:"image/*"
注意： 如果您指定多个关键字，请使用管道“|”分隔符并拼写出关键字的完整形式，而不是简短形式。例如
accept:"image/*|video/*|audio/*"
任何 IANA MIME 媒体类型也可以使用管道分隔符添加到 accept 字符串中。
有关 accept 参数的更多信息，请参阅 W3Schools。
要接受来自表单的数据，请使用 xtype:"filefield" 参数。
要更改示例以支持 PNG 图形，请将参数更改为 accept: "image/png"，并更改示例中的 Ext.Msg.alert 消息。
您还可以指定从中接受输入的捕获设备，可以是 camera、camcorder、microphone 或 null。如果您指定 null，则设备会根据设备当前的上下文确定您的意图。如果您指定 camera，则 Android 设备会打开设备的摄像头以满足输入请求。在 Android 中，如果您指定 null，则 Android 会打开可能的选项列表，供用户选择从何处获取图像，例如从其摄像头、照片库、Dropbox 或其他选项，具体取决于设备中的配置。如果省略 capture 参数，则使用设备默认值来提供图像。在 Android 中，默认值是提示选择一个应用程序以从中获取文件。
注意： 捕获取决于平台和浏览器的实现。在 iOS 中，设置 capture:"camera" 会提示您拍照或从图库中选择图像。
例如
{
xtype:"fileinput",
accept:"image/png",
capture:"camera"
}
您可以使用 multiple:"true" 参数来指示需要多个媒体文件；但是，不同的平台有不同的行为。iOS 仅支持多个图像。
在 iOS 中，如果您设置 multiple:"true"，则仅打开照片库，并且不允许摄像头提供图像。
在 Android 中，如果您指定 capture:"camera"，则会忽略 multiple 参数。
源代码：ajax-upload.html
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: 'http://sencha-xhr2-demos.herokuapp.com/simple-json.php',
method: 'POST',
xhr2: true,
progress:progressIndicator,
success: function(response) {
var out = Ext.getCmp("output");
response = Ext.JSON.decode(response.responseText, true);
out.setHtml(response.message);
},
failure: function(response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};
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");
}
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
您可以添加其他输入类型，例如颜色、日期、电子邮件、电话键盘等。根据您使用的浏览器或平台，当您指定输入类型时，浏览器会显示一个用户界面控件，用于输入输入的值。例如，如果您指定 type:"tel"，则设备会显示一个电话键盘，该键盘接受 0-9、# 和 *。
有关哪些浏览器适用于日期输入类型的信息，请参阅 Can I use Date/time input types?。
要指定日期输入，请创建一个 textfield 并覆盖 component 中的 type
{
xtype:"textfield",
label:"hello",
component: {
type:"date"
}
}
此示例使用 AJAX 接收图像，并演示如何使用进度条下载图像。
源代码：ajax-image.html
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator");
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/simple-image.php',
responseType:"blob",
method: 'POST',
progress: progressIndicator,
xhr2: true,
success: function(response) {
var createObjectURL = window.URL && window.URL.createObjectURL ?
window.URL.createObjectURL : webkitURL && webkitURL.createObjectURL ?
webkitURL.createObjectURL : null;
if (createObjectURL) {
var image = Ext.Viewport.down("image");
var url = createObjectURL(response.responseBytes);
image.setSrc(url);
}
},
failure: function(response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};
Ext.Viewport.add({
xtype:"panel",
layout:{
type: "vbox",
pack: "center",
align: "center"
},
fullscreen:true,
items: [
{
xtype:"image",
height: 400,
width: 250,
style: {
"background-position": "0 0"
},
src: 'http://placehold.it/250x400'
},
{
xtype:"button",
text: "Ajax",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
此示例使用 XHR2 将图像上传到服务器。服务器处理此图像并将其作为二进制数据发回。此数据作为数组缓冲区在 response.responseBytes 中接收。
源代码：ajax-upload-arraybuffer.html
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Img',
'Ext.MessageBox',
'Ext.Button',
'Ext.ProgressIndicator',
'Ext.form.Panel',
'Ext.field.FileInput'
],
onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator");
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/upload-arraybuffer.php',
method: 'POST',
responseType: "arraybuffer",
xhr2: true,
progress:progressIndicator,
success: function(response) {
var createObjectURL = window.URL && window.URL.createObjectURL ?
window.URL.createObjectURL : webkitURL && webkitURL.createObjectURL ?
webkitURL.createObjectURL : null;
if (createObjectURL) {
var image = Ext.Viewport.down("image");
var blob = new Blob([response.responseBytes],
{type: response.getResponseHeader("Content-Type")});
var url = createObjectURL(blob);
image.setSrc(url);
}
},
failure: function(response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};
Ext.Viewport.add(progressIndicator);
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"image",
height: 300,
width: 300,
style: {
"background-position": "0 0"
},
src: 'http://placehold.it/300x300'
},
{
xtype:"fileinput",
accept:"image/jpeg"
},
{
xtype:"button",
text: "Upload",
ui: 'confirm',
handler: function(){
var input = Ext.Viewport.down("fileinput").input;
var image = Ext.Viewport.down("image");
var files = input.dom.files;
if (files.length) {
request.binaryData = files[0];
//size is in bytes
if(request.binaryData.size <= 2097152) {
Ext.Ajax.request(request);
} else {
Ext.Msg.alert("JPG Must be less then 2MB");
}
}else {
Ext.Msg.alert("Please Select a JPG");
}
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
此示例使用 XHR2 将图像上传到服务器。然后，服务器处理此图像并将其作为二进制数据发回。此数据作为 Blob 在 response.responseBytes 中接收。
Ext.setup({
requires: [
'Ext.Panel',
'Ext.Img',
'Ext.MessageBox',
'Ext.Button',
'Ext.ProgressIndicator',
'Ext.form.Panel',
'Ext.field.FileInput'
],
onReady: function() {
var progressIndicator = Ext.create("Ext.ProgressIndicator");
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/upload-blob.php',
method: 'POST',
responseType: "blob",
xhr2: true,
progress:progressIndicator,
success: function(response) {
var createObjectURL = window.URL && window.URL.createObjectURL ?
window.URL.createObjectURL : webkitURL && webkitURL.createObjectURL ?
webkitURL.createObjectURL : null;
if (createObjectURL) {
var image = Ext.Viewport.down("image");
var url = createObjectURL(response.responseBytes);
image.setSrc(url);
}
},
failure: function(response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};
Ext.Viewport.add(progressIndicator);
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"image",
height: 300,
width: 300,
style: {
"background-position": "0 0"
},
src: 'http://placehold.it/300x300'
},
{
xtype:"fileinput",
accept:"image/jpeg"
},
{
xtype:"button",
text: "Upload",
ui: 'confirm',
handler: function(){
var input = Ext.Viewport.down("fileinput").input;
var image = Ext.Viewport.down("image");
var files = input.dom.files;
if (files.length) {
request.binaryData = files[0];
//size is in bytes
if(request.binaryData.size <= 2097152) {
request.params = {
width: image.getWidth(),
height: image.getHeight()
};
Ext.Ajax.request(request);
} else {
Ext.Msg.alert("JPG Must be less then 2MB");
}
}else {
Ext.Msg.alert("Please Select a JPG");
}
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
在此示例中，服务器以 HTML 标记响应。Response.responseXML 设置为完全可遍历的 Document 对象。
Ext.setup({
requires: [
'Ext.Panel',
'Ext.MessageBox',
'Ext.Button',
'Ext.form.Panel'
],
onReady: function() {
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/simple-document.php',
method: 'POST',
responseType:"document",
xhr2: true,
success: function(response) {
var dom = response.responseXML,
out = Ext.getCmp("output"),
el = dom.querySelector(".response");
out.innerElement.appendChild(el);
},
failure: function(response) {
console.log(response);
}
};
Ext.Viewport.add({
xtype:"panel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype:"button",
text: "Request",
ui: 'confirm',
handler: function(){
Ext.Ajax.request(request);
}
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
在此示例中，表单数据是使用新的 FormData 对象跨域发送的。firstName 和 lastName 被附加到此对象中，并作为 FormData 跨域发送。
源代码：form-simple.html
Ext.setup({
requires: [
'Ext.form.Panel',
'Ext.Button',
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.Toolbar'
],
onReady: function() {
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/post-json.php',
method: 'POST',
// Commenting out xhr2 sends this form with normal parameters.
// When xhr2 is true, the form panel creates the HTML5
// FormData object to send all fields.
xhr2: true,
success: function(form, response) {
var out = Ext.getCmp("output");
if(response) out.setHtml(response.message);
},
failure: function(form, response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};
Ext.Viewport.add({
xtype:"formpanel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype: 'fieldset',
title: 'My Uploader',
items: [
{
xtype: "textfield",
name: "firstName",
label: "First Name:"
},
{
xtype: "textfield",
name: "lastName",
label: "Last Name:"
}
]
},
{
xtype: 'toolbar',
layout: {
pack: 'center'
},
ui: 'plain',
items: [
{
xtype: 'button',
text: 'Submit',
ui: 'confirm',
handler: function() {
var form = Ext.Viewport.down("formpanel");
form.submit(request);
}
}
]
},
{
xtype: "panel",
id: "output",
scrollable: true,
flex:1
}
]
});
}
});
此示例使用新的 FormData 对象不仅发送 firstName 和 lastName，还发送用户选择的多个文件。
源代码: form-upload.html
Ext.setup({
requires: [
'Ext.form.Panel',
'Ext.Button',
'Ext.form.FieldSet',
'Ext.field.Text',
'Ext.field.File',
'Ext.Toolbar',
'Ext.ProgressIndicator'
],
onReady: function() {
// If we do not add the progress indicator to anything, it is automatically
// added to the Viewport when progress starts.
var progressIndicator = Ext.create("Ext.ProgressIndicator");
var request = {
url: 'http://sencha-xhr2-demos.herokuapp.com/form-upload.php',
method: 'POST',
// Commenting out xhr2 causes Touch to attempt to send this form through
// an iframe for the upload. When xhr2 is true, a new HTML5 FormData object
// creates to send all fields.
xhr2: true,
progress: progressIndicator,
//Progress can also be a simple callback
/*progress: function(e) {
console.log((e.loaded / e.total) * 100);
},*/
success: function(form, response) {
var out = Ext.getCmp("output");
if(response) {
out.setHtml(response.message);
for(var file in response.files) {
file = response.files[file];
out.setHtml(out.getHtml() + "<br/>-" + file.name +": " + file.size);
}
}
},
failure: function(form, response) {
var out = Ext.getCmp("output");
out.setHtml(response.message);
}
};
Ext.Viewport.add({
xtype:"formpanel",
layout:"vbox",
fullscreen:true,
items: [
{
xtype: 'fieldset',
title: 'My Uploader',
items: [
{
xtype: "textfield",
name: "firstName",
label: "First Name:"
},
{
xtype: "textfield",
name: "lastName",
label: "Last Name:"
},
{
xtype:"filefield",
label: "Select image(s):",
name: "photos",
accept:"image/jpeg",
multiple: true
}
]
},
{
xtype: 'toolbar',
layout: {
pack: 'center'
},
ui: 'plain',
items: [
{
xtype: 'button',
text: 'Submit',
ui: 'confirm',
handler: function() {
var form = Ext.Viewport.down("formpanel");
var input = Ext.Viewport.down("filefield").getComponent().input;
var files = input.dom.files;
for(var i = 0 ; i<files.length ; i++){
var file = files[i];
if(file.size > 2097152) {
Ext.Msg.alert("JPG Must be less then 2MB");
return;
}
}
form.submit(request);
}
}
]
},
{
xtype: "panel",
id: "output",
padding: "10px",
scrollable: true,
flex:1
}
]
});
}
});
Sencha Touch | 使用条款