Ajax形式不起作用

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

A键元素将是类型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 个解决方案

解决方案1
6 已采纳 2014-08-08 17:55:50

Ajax形式不起作用

问题描述

1 个解决方案

解决方案1 6 已采纳 2014-08-08 17:55:50

解决方案1
6 已采纳 2014-08-08 17:55:50