javascriptを使用してアップロードしたxmlファイルを読むには？

Question

アップロードしたXMLファイルを読んで、クライアント側からTextAreaで表示したいと考えています。私はどこにURLの代わりに文字列変数を使用して私のJavaScriptコードで問題に直面している。 URLを使用する正しい方法ではありませんか？どうすればそれを使うことができますか？私は彼らがURLとして固定ファイルを使用しているが、私のファイルを変更することができることがわかったクエリのほとんど。ここに私のコードは次のとおりです。

function fillTextArea() { 
 
    var text = document.getElementById("connectionName").value; 
 
    document.getElementById("recentDevices").value += text + '\n'; 
 
    var filename = $('input[type=file]').val().split('\\').pop(); 
 
    var xml = new XMLHttpRequest(); 
 
    xml.open('Get', filename, false); 
 
    xml.send(); 
 
    var xmlData = xml.responseXML; 
 
    document.getElementById("xmlFileInfo").value += xmlData; 
 
}

<div class="row"> 
 
    <div class="col-md-6"> 
 
     <div class="input-group"> 
 
      <div class="input-group"> 
 
       <span class="input-group-addon" id="basic-addon1">Connect To:</span> 
 
       <input type="text" class="form-control" id="connectionName" name="connectionName" placeholder="Name" aria-describedby="basic-addon1"> 
 
      </div> 
 
      <table> 
 
       &nbsp; &nbsp; 
 
       <tr> 
 
        <td>Upload XML File</td> 
 
        <td><input type="file" name="xmlFile" id="xmlFile" accept=".xml" /></td> 
 
       </tr> 
 
       <tr> 
 
        <td>&nbsp;</td> 
 
        <td><input type="submit" value="upload" class="btn btn-primary" onClick="fillTextArea()" /></td> 
 
       </tr> 
 
      </table> 
 
     </div> 
 
    </div> 
 
    <div class="col-md-6"> 
 
     <div class="panel panel-info"> 
 
      <div class="panel-heading"> 
 
       <h3 class="panel-title">Recent Machines</h3> 
 
      </div> 
 
      @Html.TextArea("Xml File Information", new { id = "xmlFileInfo", style = "max-width:100%; min-height:250px", @class = "form-control" }) 
 
     </div> 
 
     <div class="panel panel-info"> 
 
      <div class="panel-heading"> 
 
       <h3 class="panel-title">Recent Devices</h3> 
 
      </div> 
 
      @Html.TextArea("Recent Devices", new { id = "recentDevices", style = "max-width:100%; min-height:250px", @class = "form-control" }) 
 
     </div> 
 
    </div> 
 
</div>

私は私が私のjavascriptのコードを修正し、それを表示する別の方法を持っている

xml.open('Get', filename, false); 

Answer 1

、私のコードは、以下の行に問題があると思います成功しました。ありがとう@Rory McCrossan。ここに私の変更されたJavascriptのコード部分があります。

window.onload = function() { 
    var fileInput = document.getElementById('xmlFile'); 
    var fileDisplayArea = document.getElementById('xmlFileInfo'); 

    fileInput.addEventListener('change', function (e) { 
     var file = fileInput.files[0]; 
     var textType = /text.*/; 

     if (file.type.match(textType)) { 
      var reader = new FileReader(); 

      reader.onload = function (e) { 
       xmlFileInfo.innerText = reader.result; 
      } 

      reader.readAsText(file); 
     } else { 
      xmlFileInfo.innerText = "File not supported!" 
     } 
    });