Sencha Touch - Upload e download
O Sencha Touch fornece configuração XHR2 para funcionar com desenvolvimento Ajax e Ajax2.
XHR2 é xmlHttpRequest nível 2, que costumava solicitar dados do servidor. Para qualquer aplicativo da web, os dados residem no servidor e uma vez que a página é carregada, os dados devem ser acessados do servidor com a ajuda de solicitações Ajax.
O XHR2 no Sencha Touch fornece o recurso de barra de progresso, que mostra ao usuário a quantidade de dados transferidos para uma solicitação específica. O XHR2 foi adicionado recentemente, portanto, precisamos verificar se o navegador é compatível ou não.
A seguir está a função para verificar se o navegador oferece suporte a XHR2 -
if (Ext.feature.has.XHR2) {
// Here we can write functionality to work if browser supports XHR2
}Podemos até verificar se o upload progressivo com XHR2 é suportado pelo navegador ou não.
if (Ext.feature.has.XHRUploadProgress) {
// Here we can write functionality to work if browser supports progressive uploads
}Vários novos recursos XHR2 estão incluídos no Sencha Touch.
| Sr. Não | Características e descrição |
|---|---|
| 1 | XHR2: true Isso é usado para habilitar e desabilitar a funcionalidade XHR2 no aplicativo. |
| 2 | Ext.field.File Novo campo de arquivo é adicionado para dar mais calma sobre o tipo de campo. |
| 3 | Ext.field.FileInput Isso para fornecer FileInput. |
| 4 | Ext.progressIndicator Isso é para fornecer a porcentagem exata de dados transferidos em termos de barra de progresso. |
| 5 | xtype: fileinput Para criar uma instância da classe fileInput. |
| 6 | xtype: filefield Para criar uma instância da classe de arquivo. |
| 7 | responseType : value Este parâmetro permite vários tipos de respostas como texto, documento, blob etc. |
A seguir estão os exemplos para enviar uma solicitação simples de ajax com e sem parâmetro e fazer upload de arquivos usando ajax.
Solicitação Ajax simples sem parâmetros - Sucesso
<!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://www.tutorialspoint.com/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>Isso produzirá o seguinte resultado -
O exemplo acima mostra a chamada ajax bem-sucedida, pois a URL mencionada está correta. Neste exemplo, não estamos passando nenhum parâmetro, é apenas uma simples solicitação ajax que atinge a URL mencionada.
Se você estiver usando o navegador Chrome na ferramenta do desenvolvedor, navegue até a seção de rede, você pode ver a solicitação que está sendo enviada e a resposta que recebemos.
Solicitação Ajax simples sem parâmetros - Falha
<!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://www.tutorialspoint.com/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>Isso produzirá o seguinte resultado -
No exemplo acima, apenas para mostrar como funciona a falha de ajax, mencionamos a URL errada. Compare este exemplo com o anterior, você encontrará a diferença.
Envio de parâmetros em solicitação 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://www.tutorialspoint.com/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>Isso produzirá o seguinte resultado -
Neste exemplo, estamos passando parâmetros com o ajax usando a propriedade data da chamada ajax.
Upload de arquivos usando 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://www.tutorialspoint.com/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>Isso produzirá o seguinte resultado -
Este exemplo mostra como fazer upload de dados usando uma chamada ajax. Neste exemplo, estamos usando o indicador da barra de progresso para mostrar o progresso durante o upload do arquivo.