www.dextsolution.com
DEXTUPLOAD
X5
menu toggle製品の説明 > ファイルのアップロード

ファイルのアップロード

一般的に、ブラウザでファイルを転送するには、input要素のtype属性を「file」に設定する。そしてPOST形式で送信する必要がありますので、form要素のmethod属性を「post」に設定し、enctype属性をmultipart / form-dataに設定する必要がある。 

<form action="..." method="post" enctype="multipart/form-data">
    <input type="file" name="file1"/>
    <input type="submit" value="Submit"/>
</form>

ユーザーがファイルを選択した後、「Submit」ボタンをクリックすると、ブラウザがサーバにファイルデータをマルチパート形式でエンコードして送信する。

純粋なHTMLだけを使用してアップロードをするには、アップロードするファイルの数だけinput要素を作成しなければならない。HTML5では、1つの要素に複数のファイルを選択することができ、MIMEの設定を使用してフィルタリングも可能である。しかし、まだ使用するに不便インターフェース的要素が存在し、すべてのブラウザで同じようにサポートしていない問題も存在する。

DEXTUploadX5を使用する主な手順は以下の通りである：

のJavaScriptファイルを宣言する

DEXTUploadX5コンポーネントを使用するには、dextuploadx5-configuration.jsファイルとdextuploadx5.jsファイルをページに含めるべきである。

<script src="path/dx5/dextuploadx5-configuration.js"></script>
<script src="path/dx5/dextuploadx5.js"></script>
dextuploadx5-configuration.jsファイルをご覧ください。

DEXTUploadX5を使用するには、dextuploadx5-configuration.jsファイルを宣言されたオブジェクトのプロパティの値をすべて設定してくれるとする。このスクリプトのソースには、dextuploadx5Configurationというコンポーネントの設定を盛り込んだJavaScriptのオブジェクトが宣言されている。

このオブジェクトのauthkey属性は、発行された試用版認証キーあるいは正式ライセンスの認証キーを設定するようにする。（詳細については、ライセンスを参照している。）

productPath属性は、製品があるウェブパスを設定する。もしパスが正しくない場合、コンポーネントが正常に起動されない。

dextuploadx5-configuration.jsスクリプトファイルは、DEXTUploadX5が使用されているすべてのページに含める必要があり、dextuploadx5.jsファイルより先に宣言する必要がある。

# dextuploadx5-configuraiton.js
win.dextuploadx5Configuration = {	
    // ファイルをアップロードするためには、必ず認証キー文字列がなければならない。	
    authkey: "jn+xziPdVh6f5KN17uFHdY95XEvB7o...skip...2YjGiLl92zWiXAyO2FdI9r5XGfwxQ=",
  
    // パスとは、製品のリソースの位置をいう。
    // 必ずスキーマ（http、https）を含む完全なpathを設定する必要がある。（相対パスで入力禁止）
    // 前提パスの例productPath： "http://www.sample.com/dx5/"、
    // 同じドメインならproductPath：location.origin + "/dx5/" 
    productPath: location.origin + "/dx5/"
};
コンポーネントを作成する

ブラウザがdextuploadx5.jsスクリプトファイルを読むDEXTUploadX5を管理するdx5オブジェクトが自動的に生成される。dx5は、コンポーネントを作成し、管理するためのJavaScriptのオブジェクトとして、当該ページで、グローバル（scope）に使用することができる。

コンポーネントを作成するには、コンポーネントを含んでいるコンテナ要素が必要であり、ページの最後にdx5.create関数を使用してコンポーネントを作成することができる。（またはすべてのDOM要素がロードされた後で、dx5.create関数を呼び出してもよい。）

コンポーネントのサイズは、コンポーネントのコンテナのサイズを基準とする。したがって、必ずコンテナのサイズを指定する必要がある。

<div id="dext5-container" style="width:500px; height:300px;"><!-- コンポーネントのコンテナ要素 --></div>
<script>
  // id属性でコンポーネントにDOM IDを与える。
  // parentIdは、コンテナIDを指定する。
  dx5.create({ id: "dext5", parentId: "dext5-container" });
</script>

もし「DEXTUploadX5 component loading failed！」「メッセージウィンドウ浮かぶ場合には、dextuploadx5-configuration.jsでproductPath設定に問題があるので、パスが正しいことを確認しなければならない。

イベントの接続

製品は、内部的に、特定の活動が開始する前と後でイベントが発生する。コンポーネントがロード（load）された場合onDX5Createdコールバック関数を呼び出し、もし使用中にエラーが発生した場合onDX5Error関数を呼び出すように設定されている。イベントを接続しなければなら製品を使用することができているわけではない、複雑で多様な機能を実装するには、イベントを適切に使用する。イベントは、DOMイベントのよう登録をするのではなく、単に指定された名前を持つコールバック関数を作成するだけでイベントを捕捉することができる。 

// onDX5Errorという名前の関数を次のように作成すると、コンポーネントでエラーが発生したときに、onDX5Error関数を呼び出します。
function onDX5Error(id, code, msg) {
  ...
}

// onDX5Created関数を次のように作れば、コンポーネントがロード（生成）された後に呼び出されます。
function onDX5Created(id) {
  ...
}

onDX5Errorコールバック関数が宣言されていなければ、発生したエラーを調べることができない。

ボタンの接続

DEXTUploadX5は、コンポーネントの画面内にファイルを追加し、アップロードを実行するボタンを内蔵していない。いくつかのいくつかの機能を除いては、主要なボタンは、すべての外部HTML要素を使用すればよい。ファイルのアップロードをするには、ファイルを追加することができるボタンとアップロードを開始するボタンが必要であり、両方のボタンをスクリプトを使用して、コンポーネントの機能を接続してくれるとする。 

<button type="button" onclick="addTo('component-id');">追加</button>
<button type="button" onclick="uploadFrom('component-id');">アップロード</button>
<script>
function addTo(id) {
  dx5.get(id).openFileDialog();
}

function uploadFrom(id) {
  var dx = dx5.get(id);
  if (dx.hasUploadableItems()) {
    dx.setUploadURL("http://domain/uploadpath");
    dx.upload("AUTO");
  } else {
    alert("アップロードする対象がない。");
  }
}
</script>

いくつかの機能については、上記のように、複雑なスクリプトを使用せずに、コンポーネントのロード時に自動的にバインドがされている機能を提供している。

<button id="btn-add-files" type="button" ">追加</button>
<button id="btn-upload" type="button">アップロード</button>
<script>
  dx5.create({
    ...,
    // コンポーネントが作成されるとき、ファイルの追加機能とファイルのアップロード機能が自動的に接続するようにする。
    btnFile: "btn-add-files", btnUploadAuto: "btn-upload"
  });
</script>

自動バインディング機能は非常に便利が、複雑な機能を実装するには適していないことができる。

サーバー側の処理

ファイルをアップロードするには、純粋なHTMLを使用するか、DEXTUploadX5などのクライアントコンポーネントが必要であり、サーバは、クライアントから送信されたファイルのデータをサーバー上の特定の場所に保存するための追加の実装が必要である。ファイルのアップロードを処理するための技術や機能を持っているサーバープラットフォームもあるが、そうでない環境もある。ASP.NET、PHP、Java Spring Web Frameworkのようなプラットフォームは、基本的にアップロードされたファイルを処理することができますが、ASP、Java ServletやJSPなどの技術は、ファイルを処理することができないので、ファイルのアップロードを処理するためのライブラリが必須である。

そのサーバーコンポーネント

  • ASP: DEXTUpload Professional
  • ASP.NET: DEXTUpload.NET Professional
  • Java Servlet(JSP)/Spring: DEXTUploadNJ
  • PHP, Nodejs, Python, Ruby: 未サポート

ほとんどのDEXTUploadX5の機能はサーバーに依存しませんが、ラージアップロード、ファイルダウンロード、ファイルオープンのような機能は独自のサーバーコンポーネントとの統合が必要です。 サーバーサイドのコードは言語、プラットフォーム、使用するコンポーネントに依存しますので、あなたの環境をサポートするコンポーネントのドキュメントやサンプルを参照してください。

サーバーから受信した応答データの処理

ウェブは、GET、POSTの送信された要求に対して応答情報をクライアントに戻してくれる。

ファイルをアップロードすると、その結果を応答データに取り戻す。この応答データは、コンポーネントのgetResponses関数を持って得ることができる。

// onDX5UploadCompleted関数は、アップロードが完了し（サーバー側のファイルのアップロード処理が完了）したら、呼び出されるコールバック関数である。
function onDX5UploadCompleted(id) {  
  // 応答データを確認する。
  alert(dx5.get(id).getResponses(0));
}

「ファイルの追加>ファイルのアップロード>サーバー側の処理>応答データを返す」のプロセスが完了したら、ファイルのアップロードを終了が出て、純粋なHTMLアップロードとは異なり、画面の切り替え（ページ変更）が発生しない。

Copyright ⓒ DEXTSolution Inc. All rights reserved