Ajax表单不起作用

ajax form doesn't work

本文关键字：不起作用 表单 Ajax      更新时间：2023-09-26

我在我的代码问题，我需要发送一个图像与ajax，但当我在我的代码，不工作。

我需要使用表单来验证我的servlet。

 <script type="text/javascript">
      function UploadFile() {
          fileData = document.getElementById("filePicker").files[0];
          var data = new FormData();
          var url = 'localhost';
          console.log(url);
          alert(url);
          $.ajax({
              url: url,
              type: 'POST',
              data: fileData,
              cache: false,
              crossDomain: true,
              dataType: 'json',
              processData: false,
              contentType: false,
              success: function (data) {
                  alert('successful..');
              },
              error: function (data) {
                  alert('Ocorreu um erro!');
              } 
          });
          alert("Finalizou");
      }
    </script>
    <body>
       <form>
            <input type="file" id="filePicker" value="" />
            <button id="btnUpload" onclick="UploadFile()">Upload</button>
       </form>
    </body>

如果我像那样删除表单

<body>
   <input type="file" id="filePicker" value="" />
   <button id="btnUpload" onclick="UploadFile()">Upload</button>
</body>

工作。

按钮元素默认为submit类型，因此它将提交表单并重新加载页面。
你必须防止这种情况，像这样

<form>
    <input type="file" id="filePicker" value="" />
    <button id="btnUpload" onclick="UploadFile(); return false;">Upload</button>
</form>

但是当你使用jQuery时，你应该删除内联javascript并使用适当的事件处理程序

$(function() {
    $('#btnUpload').closest('form').on('submit', function(e) {
        e.preventDefault();
        UploadFile();
    });
});
相关文章：