Ajax multipart/form-data 方法给出错误

Question

上传 multipart/form-data 表单时出错，我有两个输入，一张图片和一个 pdf。

这里是html代码

<form class="form-group" id="form-add" >

    <input name="title" size="30" class="form-control margin-bottom-25" id="title"  placeholder="Enter Title" spellcheck="true" autocomplete="off" type="text" />
    <input name="code" size="30" class="form-control margin-bottom-25" id="code"  placeholder="Enter Course Code" spellcheck="true" autocomplete="off" type="text" />
    <div class="wp-media-buttons"><input type="file" id="image_select" name="image" class="form-control margin-bottom-50" ></div>
    <div class="wp-media-buttons"><input type="file" name="pdf" id="pdf_select" class="form-control margin-bottom-50" ></div>
    <div class="col-md-6"><input type="text" id="batch" name="batch" class="form-control margin-bottom-25" placeholder="Enter Batch Size" /></div>
    <div class="margin-bottom-25 col-md-6"><select id="batch-dec" name="batch-dec" class="form-control margin-bottom-25">
    <option >Select</option>
    <option value="Batch Size">Batch Size</option>
    <option value="Field Work">Field Work</option>
    <option value="Project">Project</option>
    </select></div>

    <div class=" col-md-6">
    <input type="text" id="duration" name="duration"  class="form-control margin-bottom-25" spellcheck="true" placeholder="Enter Duration"/></div>
    <div class="col-md-6">
    <select id="duration-dec" name="duration-dec-dec" class="form-control margin-bottom-25">
    <option >Select</option>
    <option value="Time Duration">Time Duration</option>
    <option value="Class Room">Field Work</option>
    </select>
    </div>
    <div class="clearfix"></div>
    <div class="margin-bottom-25">Add Course Description Below</div>
    <div id="editor-container" class="editor-container margin-bottom-25" style="position:relative">

    <textarea spellcheck="true" class="editor-area form-control margin-bottom-25" style="height: 326px; margin-top: 37px;" cols="40" name="content" id="content" aria-hidden="false"></textarea>
    </div>

      <input class="btn btn-primary publish" type="submit" name="submit" id="publish" value="Publish" /> 
</form>

Ajax代码

$(document).ready(function(){  

    $(document).on('click', '#publish', function(){  

       /*var code = $('#code').val();  
       var title= $('#title').val();  
       var image= $('#image_select').files[0]; 
       var pdf= $('#pdf_select').files[0];
       var batch = $('#batch').val();  
       var batch_dec = $('#batch-dec').val();  
       var duration = $('#duration').val();  
       var duration_dec = $('#duration-dec').val();  
       var content = $('#content').val();  
        if($(document).on('click','#draft')){
            var status = $('#draft').val();
        }
        else if(($(document).on('click','#publish'))){
            var status =$('#publish').val();
        } 
        var status =$('#publish').val();

        var formdata = new FormData();
        formdata.append('code',code);
        formdata.append('title',title);
        formdata.append('image',image);
        formdata.append('pdf',pdf);
        formdata.append('batch',batch);
        formdata.append('batch_dec',batch_dec);
        formdata.append('duration',duration);
        formdata.append('duration_dec',duration_dec);
        formdata.append('content',content);
        formdata.append('status',status);*/
        //alert(formdata);
        var formdata = new FormData($('#form-add')[0]);
        formdata.append('image',$('#image_select')[0].files[0] );
        formdata.append('pdf',$('#pdf_select')[0].files[0]);
        $.ajax({  
            url:"include/courses-add.php",  
           // method:"POST", 
            type:'post',            
            enctype:'multipart/form-data',
            data:formdata, 
            contentType:false,
            cache:false,
            processData: false,  

            success:function(data){  
                alert(data);
                $('#result').html("<div class='alert alert-success'>"+data+"</div>");
            } ,
            error:function(e)
            {
                console.log('error:',e);
            }
        });  
    });  

});

我使用相同的方法分别添加文件和其他数据，它工作正常，但我需要 post 两种数据以相同的形式。得到 console.log 喜欢

Error:
Object { readyState: 0, getResponseHeader: getResponseHeader(), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(), overrideMimeType: overrideMimeType(), statusCode: statusCode(), abort: abort(), state: state(), always: always(), then: then(), … }

可以看到 JavaScript 尝试了很多代码仍然出错，post 刚刚提交但是

ajax 块不起作用，它在控制台中抛出错误。

Answer 1

 $("#form-add").on('submit', (function(e) {
e.preventDefault();

   var code = $('#code').val();  
   var title= $('#title').val();  
   var image= $('#image_select').files[0]; 
   var pdf= $('#pdf_select').files[0];
   var batch = $('#batch').val();  
   var batch_dec = $('#batch-dec').val();  
   var duration = $('#duration').val();  
   var duration_dec = $('#duration-dec').val();  
   var content = $('#content').val();  

    var status =$('#publish').val();

    var formdata = new FormData(this);
    formdata.append('code',code);
    formdata.append('title',title);
    formdata.append('image',image);
    formdata.append('pdf',pdf);
    formdata.append('batch',batch);
    formdata.append('batch_dec',batch_dec);
    formdata.append('duration',duration);
    formdata.append('duration_dec',duration_dec);
    formdata.append('content',content);
    formdata.append('status',status);

    $.ajax({  
        url:"include/courses-add.php",  
       // method:"POST", 
        type:'post',            
        enctype:'multipart/form-data',
        data:formdata, 
        contentType:false,
        cache:false,
        processData: false,  

        success:function(data){  
            alert(data);
            $('#result').html("<div class='alert alert-success'>"+data+"</div>");
        } ,
        error:function(e)
        {
            console.log('error:',e);
        }
    });  
}));

Answer 2

使用 ajaxSubmit 很简单：

https://github.com/claviska/jquery-ajaxSubmit

$('#postreportform').on('submit', function (e) {
    var postreportform = $(this);
    e.preventDefault();
    $(this).ajaxSubmit(
        {
            success: function (data) {
               .....
            },
            error: function (jqXhr) {
               .....
            }
        });
});

Ajax multipart/form-data 方法给出错误

Ajax multipart/form-data method gives error

php

ajax

multipartform-data

https://github.com/claviska/jquery-ajaxSubmit