Question

我的代码中存在问题，我需要使用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>

这是有效的。

Answer 1

默认情况下，按钮元素的类型为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();
    });
});

ajax表单不起作用

1 个答案: