通过jquery FormData提交表单

时间:2017-07-25 19:32:55

标签: php jquery ajax

我正在尝试使用jquery上传文件。这是表格:

<form id="upload_data" class="project" enctype="multipart/form-data" method="POST">

<select id="project_id" name="project_id">
   <option value="1">1</option> 
   <option value="2">2</option> 
</select>

 <input  type="file" id="data" name="data" />

<input type="hidden" name="user_id" id="user_id" value="12" required>

<button type="submit" id="ajax" class="btn btn-primary">Submit</button>
</form>

这是jquery部分:

$('#upload_data').submit( function( e ) {

        var form = $('form');
        var formData = new FormData();

                $.each($(':input', form ), function(i, fileds){
                   formData.append($(fileds).attr('name'), $(fileds).val());
               });

                $.each($('input[type=file]',form )[0].files, function (i, file) {
                   formData.append(file.name, file);
               });

$.ajax( {
      url: '../controllers/process.php',
      type: 'POST',
      enctype: 'multipart/form-data',
      data: formData,
      processData: false,
      contentType: false,
      success: function(data)
        {
            alert(data);
        },
        error: function(data)
        {
            alert(data);

        }
    } );

    });

问题是我在process.php中得到空的帖子值:

if (isset($_POST['project_id']) AND isset($_POST['user_id'])){
   //process 
}else{
echo 'No post data';
}

它始终返回'无后期数据'(但在控制台中,我可以看到数据已经发布,但在服务器中并非如此)。我在这里缺少什么?

3 个答案:

答案 0 :(得分:0)

您可以使用Ajax Form Plugin中的ajaxForm / ajaxSubmit函数或jQuery序列化函数。

http://api.openweathermap.org/data/2.5/weather?q=

jQuery AJAX submit form

答案 1 :(得分:0)

如果要将文件附加到formData

formData.append(file.name, file);

您需要根据MDN文档使用此版本的方法

formData.append(name, value, filename);

这将允许您提供字段名称,文件数据和文件名

您也可以考虑只提交表单而无需使用formData

答案 2 :(得分:0)

感谢您的回复。问题是关于max_upload_filesizepost_max_size。我增加了这些选项的值,现在它正在工作。感谢。