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