1

ユーザー提供のデータに基づいてかなり複雑な数学的計算を実行する HTML5/JS Web アプリケーションを作成しました。アプリケーションは、ユーザーが手動で情報を入力し、処理のために送信するいくつかの異なる入力フィールドを持つことで機能します。ユーザーが入力する情報の多くは、頻繁に変更されることはありません (ただし、ハードコーディングが経済的でない場合は十分に頻繁に変更されます)。各ユーザーに合わせた必要なデータのカスタム。フィールドは自動的に入力されます。ユーザーは、新しい計算を取得する前に、新しい値を反映するために必要に応じて特定の XML ファイルを変更します。余談ですが、サーバー側のものはオプションではありません。

HTML5/JS を使用して XML ファイルをアップロードし、ファイルの内容を読み取り、入力フィールドに自動的に入力することはできますか?

4

3 に答える 3

7

コメントで述べたように、ブラウザーが適切な File API と FileReader をサポートしていれば、サーバー側の介入なしでこのタスクを実行できます。

ユーザーがこれらの XML ファイルのいずれかを選択するファイル入力要素があるとします。

<input id="fileChooser" type="file">

これで、ユーザーが選択したファイルにアクセスし、関連するテキスト/XML を取得して解析し、ページのテキスト入力フィールドに値を割り当てることができます。コードは次のようになります。

var fileChooser = document.getElementById('fileChooser');

function parseTextAsXml(text) {
    var parser = new DOMParser(),
        xmlDom = parser.parseFromString(text, "text/xml");

    //now, extract items from xmlDom and assign to appropriate text input fields
}

function waitForTextReadComplete(reader) {
    reader.onloadend = function(event) {
        var text = event.target.result;

        parseTextAsXml(text);
    }
}

function handleFileSelection() {
    var file = fileChooser.files[0],
        reader = new FileReader();

    waitForTextReadComplete(reader);
    reader.readAsText(file);
}

fileChooser.addEventListener('change', handleFileSelection, false);
于 2013-06-30T19:51:28.327 に答える
-1

Saxon-CE アプリケーションの理想的な候補のように思えます。

ただし、サーバーのサポートがなければ機能しないと思います。ファイルの「アップロード」について話します。つまり、サーバーへのアップロードを意味し、それを可能にするためにサーバーで何かを行う必要があります。ユーザーにセキュリティ設定をオフにするように依頼しない限り、ブラウザー アプリケーションがローカル マシン上のファイルストアと対話することはできません。

于 2013-06-29T07:57:20.923 に答える
-2

you must use some server-side code anyway, because JS doesn't allow to upload file and even access it on users computer

so you can not get the contents of this file if not uploading it to server (upd: actually you can do it, so this is only a suggestion)

but you can do it in very simple way e.g. submit a form with file input

<form enctype="multipart/form-data" action="/path/to/script" method="post">
    <input name="myFile" type="file" />
</form>

to send it using ajax and get the contents of it as a response from the easy script like this:

<?php
if (!$_FILES["myFile"]["error"]) {
    header("Content-Type: text/xml");
    echo file_get_contents($_FILES["myFile"]["tmp_name"]);
}
?>

I'm using php, but I'm sure it's not a problem to perform it in another language. Of course I know that file uploading is supported only by XHR2 in major browsers, but as far as you are asking about HTML5 this solution will work.

Next step is to add success handler to your ajax request

success: function(data) {
// and parse it
if (window.DOMParser)
  {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(data,"text/xml");
  }
else // Internet Explorer
  {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(data); 
  }
}

Great tutorial here. Now you can access xml contents using xmlDoc var like simple DOM document.

于 2013-06-29T00:49:37.133 に答える