通過ajax上傳文件jquery php api

Question

我使用下面的格式代碼。

PHP文件：

<form action="http://clientwebapi.com/createEvent" id="form_createEvent" method="post" enctype="multipart/form-data"> 
<input type="text" name="image_title" /> 
<input type="file" name="media" accept="image/*,video/*"/> 
</form> 

JQUERY文件：

$('#form_createEvent').submit(function() { 
    var form = $(this); 
    $.ajax({ 
     url: form.attr("action"), 
     type: form.attr("method"), 
     xhrFields: { 
      withCredentials: true 
     }, 
     data: form.serialize() 
    }).done(function() { 
     showCurrentLocation(); 
     alert('Event created successfully..'); 
     location.reload(); 

    }).fail(function() { 
     alert("fail!"); 
    }); 
    event.preventDefault(); 
}); 

上面jQuery代碼被提交。此外，當我提交下面的格式時，它將重定向到「http://clientwebapi.com/createEvent」併成功創建事件。

表單提交，並重定向到客戶端頁面：

$('#form_createEvent').submit(function() { 
    var fd = new FormData(); 
    fd.append('media', input.files[0]); 

    $.ajax({ 
     url: form.attr("action"), 
     data: fd, 
     processData: false, 
     contentType: false, 
     type: form.attr("method"), 
     success: function (data) { 
      alert(data); 
     } 
    }); 
event.preventDefault(); 

}); 

這裏我怎樣才能避免同時提交表單，並創建與給定圖像的事件。好心幫

Answer 1

停止表單提交我找到了答案此。我在這裏犯了一些錯誤。我用下面的代碼解決..

$('#form_createEvent').submit(function() { 
      var form = new FormData($(this)[0]); 
      $.ajax({ 
       url: 'http://clientwebapi.com/createEvent/', 
       type: 'POST', 
       xhrFields: { 
        withCredentials: true 
       }, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       data: form, 
       beforeSend: function() { 
        $("#output_process").html("Uploading, please wait...."); 
       }, 
       success: function() { 
        $("#output_process").html("Upload success."); 
       }, 
       complete: function() { 
        $("#output_process").html("upload complete."); 
       }, 
       error: function() { 
        //alert("ERROR in upload"); 
        location.reload(); 
       } 
      }).done(function() { 
       alert('Event created successfully..'); 

      }).fail(function() { 
       alert("fail!"); 
      }); 
      event.preventDefault(); 
     }); 

Answer 2

你忘了添加事件作爲參數傳遞給提交功能：

$('#form_createEvent').submit(function (event) { 

Answer 3

您可以通過return false;

$('#form_createEvent').submit(function() { 
    // some code 
    $.ajax({ 
     // some code/objects 
    }); 

    return false; // here, it will stop the form to be post to the url/action 

});