如何通过在事件OnClick上使用Ajax发布数据和文件

Question

html。

<form id="myForm">
  <input type="text" name="name">
  <input type="file" name="userImage">
  <button onclick="post('./example.php')" type="button">Save</button>
</form>

现在我想使用post（）函数

发布它

java-script：

Function post(url){
   $.ajax({
        url:url,
        type: 'POST',
        data: $("#myform").serialize(),
        success: function (data) {
           alert("successfully posted.");
        }
    });
}

但不序列化文件

Answer 1

我的建议是：尝试将html和js分开定义事件回调功能上的事件回调函数或" jquery的函数"（这样更容易）。

。

您的问题是，当您需要传递有效的URL时，您正在传递字符串" URL"，因此请直接在Ajax URL字段上写入URL或在表单标签上定义数据属性，例如data-url =" http：//whything"，并从事件中捕获此值。

如果您使用jQuery的" On"函数非常容易，则可以通过jQuery的"数据"函数在"此"var。

上获得数据值

类似...

$("#myForm").on("click", 
      function() {
            post(this.data("url"));
});

，但您可能不需要URL作为var

Answer 2

如果我正确理解，问题是什么都没有发布。问题是您正在尝试通过Ajax上传文件，这不是错误的，但是需要在此处进行不同的显示：
jQuery ajax文件上传

Answer 3

您可以添加带有表单数据的额外数据

使用serializearray并添加其他数据：

var data = $('#myForm').serializeArray();
data.push({name: 'tienn2t', value: 'love'});
$.ajax({
type: "POST",
url: "your url.php",
data: data,
dataType: "json",
    success: function(data) {
         //var obj = jQuery.parseJSON(data); if the dataType is not specified as json uncomment this
        // do what ever you want with the server response
    },
    error: function() {
        alert('error handing here');
   });

Answer 4

首先，我需要说，如果要上传文件，我的意思是，如果您的表单具有文件输入，则根据RFC-7578添加表单属性enctype="multipart/form-data"。您还可以查看http://www.w3schools.com/tags/att_form_enctype.asp。

然后再次移至HTML部分。假设您有一个表单输入，例如

<form action="some_domain/example.php" method="post" enctype="multipart/form-data">
    <input type="file" name="file" id="fileId"/>
    <input type="text" name="firstName" id="name">
    <button onclick="post('some_domain/example.php')" type="button">Save</button>
</form>

现在使用AJAX发布文件数据：

function post(url){
   $.ajax({
        url:url,
        type: 'POST',
        processData:false,
        contentType:false,
        data: $('#fileId')[0].files[0],
        success: function (data) {
           alert("successfully posted.");
        }
    });
}

我认为这应该很好。

更新：如果您也要发布文本数据，则应使用FormData对象。

function post(url){
var formData = new FormData();
   var files = document.getElementById("fileId").files;
   for (var i = 0; i < files.length; i++) {
       var file = files[i];
       formData.append('files[]', file, file.name);
}
formData.append('firstName',$('#name').val());
$.ajax({
        url:url,
        type: 'POST',
        processData:false,
        contentType:false,
        data: formData,
        success: function (data) {
           alert("successfully posted.");
        }
    });
}