使用表单选择文件并在textarea中加载内容

Question

根据选择的下拉列表尝试在文本区域中加载文本文件。当前，文件阅读器和表单是彼此独立的。能否请您将两者混合在一起？还要尝试使它成为AJAX表单。

<div id="form_container">
<form id="helperForm" class="helperForms" method="post" action="#">                     
    <ul>
    <li id="li_1" >
    <label class="description" for="Fruit">Fruit </label>
    <select class="element select medium" id="Fruit" name="Fruit"> 
    <option value="" selected="selected"></option>
    <option value="Apple" >Apple</option>
    <option value="Orange" >Orange</option>
    <option value="Grape" >Grape</option>
    </select>
    </li>

    <li class="buttons">

    <input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
    <button type="reset" value="Reset">Reset</button>
    </li>
    </ul>
</form> 
</div><!--form_container !-->

<input type="file" id="myFile">
<hr>
<!--<div style="width: 300px;height: 0px" id="output"></div>-->
<textarea style="width:500px;height: 400px" id="output"></textarea>

<script type="text/javascript">
var input = document.getElementById("myFile");
var output = document.getElementById("output");

input.addEventListener("change", function () {
  if (this.files && this.files[0]) {
    var myFile = this.files[0];
    var reader = new FileReader();

    reader.addEventListener('load', function (e) {
      output.textContent = e.target.result;
    });

    reader.readAsBinaryString(myFile);
  }
});
</script>

非常感谢您。