通过ajax提交表格

时间:2013-10-12 15:52:26

标签: javascript html ajax http-post

我有这样的表格:

<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);
    }
});

1 个答案:

答案 0 :(得分:0)

如果您通过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);
        }
    });
}

希望它有所帮助。