通过ajax提交表单答案

【问题标题】：submit a form via ajax通过ajax提交表单
【发布时间】：2013-10-12 15:52:25
【问题描述】：

我有这个表格：

<form id="ugaForm" method="POST" action="/url/upload" target="myFrame"
enctype="multipart/form-data">

Please select a file to upload : <input id="file" type="file" name="file" />
<input type="button" onclick="submitF()" value="upload" />
</form>

正常提交时效果很好。

我需要一个 ajax 帖子来模仿这个确切的表单提交。此代码不起作用：

function submitF() {
debugger;
var mfile = $("form#ugaForm")[0].file;
var fd = new FormData();    
fd.append( 'file', mfile);

$.ajax({
  url: 'http://localhost/url/upload/',
  data: JSON.stringify({ 'objectData' : fd}),
  cache: false,
  contentType : false,      
    processData: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

【问题讨论】：

标签： javascript html ajax http-post

【解决方案1】：

如果您通过 AJAX 提交某些内容，那么为什么要将其放入表单中。只需删除表单并保留其中的其他内容，使其变成这样：

<div id="ugaForm">
    Please select a file to upload : <input id="file" type="file" name="file" />
    <input type="button" onclick="submit()" value="upload" />
</div>

JS 应该是这样的：

function submitF() {
    debugger;
    var mfile = $("#ugaForm")[0].file;
    var fd = new FormData();
    fd.append('file', mfile);

    $.ajax({
        url: 'http://localhost/url/upload/',
        data: JSON.stringify({
            'objectData': fd
        }),
        cache: false,
        contentType: false,
        processData: false,
        type: 'POST',
        success: function (data) {
            alert(data);
        }
    });
}

希望对你有帮助。

【讨论】：