Sencha-touch-upload-and-download
Sencha Touch-アップロードとダウンロード
Sencha Touchは、AjaxおよびAjax2開発で動作するXHR2構成を提供します。
XHR2はxmlHttpRequestレベル2で、サーバーからデータを要求するために使用されます。 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機能が含まれています。
| Sr.No | Features & Description |
|---|---|
| 1 |
XHR2: true これは、アプリケーションでXHR2機能を有効または無効にするために使用されます。 |
| 2 |
Ext.field.File 新しいファイルフィールドが追加され、フィールドのタイプについてより正確になりました。 |
| 3 |
Ext.field.FileInput これはFileInputを提供します。 |
| 4 |
Ext.progressIndicator これは、転送されたデータの正確な割合をプログレスバーで提供するためです。 |
| 5 |
xtype: fileinput fileInputクラスのインスタンスを作成します。 |
| 6 |
xtype: filefield ファイルクラスのインスタンスを作成します。 |
| 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://www.finddevguides.com/sencha_touch/index',
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>それは次の結果を生成します-
上記の例は、記述されたURLが正しいため、成功したajax呼び出しを示しています。 この例では、パラメーターを渡していません。これは、記載されているURLにヒットする単純なajaxリクエストです。
開発者ツールで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://www.finddevguides.com/sencha_touch/indexx',
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://www.finddevguides.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>それは次の結果を生成します-
この例では、ajax呼び出しのdataプロパティを使用して、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.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.finddevguides.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>それは次の結果を生成します-
この例は、ajax呼び出しを使用してデータをアップロードする方法を示しています。 この例では、プログレスバーインジケーターを使用して、ファイルのアップロード中の進行状況を表示しています。
