Javascript 如何在通过html输入表单上传时立即在传单地图上加载geojson？

我想构建一个系统，允许客户端从html表单上传geojson文件，这些数据将显示在传单地图上。当我尝试这样做时，它显示了错误代码405。我想提交包含geojson文件的表单，并使用传单杂食插件加载此文件。 我的html文件为

<section class="addVectorLayer">
        <form action="" method="POST" class="vector">
            Click to add your vector layer. It support Json, Geojson, csv, gpx and kml formats.
            <input type="file" name="files" id="input_files">
        </form>
</section>

---

请注意，我不想要异步调用

我基于这个插件添加了一些代码。这对我没什么用。更好的方法是高度赞赏的

var fileInput = document.getElementById('input_files');

   fileInput.addEventListener('change', function (event) {
      var file = fileInput.files[0],
         fr = new FileReader();
      fileInput.value = ''; // Clear the input.
      extention = file.name.split('.')[1]
      if (extention === 'geojson') {
         fr.onload = function () {
            var layer = omnivore.geojson(fr.result).addTo(map);
            map.fitBounds(layer.getBounds());
         };
         fr.readAsDataURL(file);
      }
   });

使用

fr.readAsText（）

和JSON.parsing对结果进行解析可以将结果提供给L.geoJson（），而无需使用杂食插件

var fileInput = document.getElementById('input_files');

   fileInput.addEventListener('change', function (event) {
      var file = fileInput.files[0],
         fr = new FileReader();
      fileInput.value = ''; // Clear the input.
      extention = file.name.split('.')[1]
      if (extention === 'geojson') {
         fr.onload = function () {
            var layer = omnivore.geojson(fr.result).addTo(map);
            map.fitBounds(layer.getBounds());
         };
         fr.readAsDataURL(file);
      }
   });