Question

HTML here。

＆＃13;

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

＆＃13;

现在我想使用post（）函数

发布它

Java的脚本：

＆＃13;

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

＆＃13;

但不是序列化文件

Answer 1

我的建议是：尝试分离html和js定义事件回调on＆＃34; attacheventlistener＆＃34;功能或＆＃34; on＆＃34; jquery的功能（这种方式更容易）。

你的问题是你正在传递字符串＆＃34; url＆＃34;当您需要传递有效网址时，请将网址直接写在ajax网址字段上，或在表单标记上定义数据属性，例如data-url =＆＃34; http：// whatever＆＃34;，并从事件中捕获此值。

如果你使用jquery＆＃34;＆＃34;＆＃34;功能非常简单，您可以通过jquery＆＃34;数据＆＃34;来获取数据的价值。功能超过＆＃34;这个＆＃34;变种

像...一样的东西。

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

但是你可能不需要url作为var。

Answer 2

如果我理解正确，问题是没有发布任何内容。问题是你试图通过ajax上传文件，这没有错，但需要以不同的方式显示在这里：
jQuery Ajax File Upload

Answer 3

首先我需要说的是，如果你想上传文件，我的意思是如果你的表单有文件输入，那么根据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.");
        }
    });
}

Answer 4

为表单添加类似

的属性

<form  enctype="multipart/form-data" ....>

这应该有效

Answer 5

您可以使用表单数据添加额外数据

使用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');
   });

如何在事件onclick上使用ajax发布数据和文件

5 个答案: