如何在使用 jquery Ajax 处理数据时不需要上传文件答案

【问题标题】：how to make a file upload NOT required when handling data with jquery Ajax如何在使用 jquery Ajax 处理数据时不需要上传文件
【发布时间】：2020-03-25 15:07:22
【问题描述】：

我有如下表格：

<form name ="order" id="order" action="" method="POST" role="form" enctype="multipart/form-data">
    <input class="checkbox pull-left" type="checkbox" name="check_list[]" value="p1">&nbsp;Product 1
    <input class="checkbox pull-left" type="checkbox" name="check_list[]" value="p2">&nbsp;Product 2
    <input class="form-control name" name="name" type="text" placeholder="name">
    <input class="form-control address" name="address" type="text" placeholder="address">
    <input class="form-control email" name="email" type="email" placeholder="email">
    <input class="form-control phone" name="phone" type="text" placeholder="phone">

    <input type="file" name="image" class="image">
    <button type="submit" id="cf-submit" name="submit" class="btn btn-primary">SUBMIT</button>  
</form>

要将数据发送到 php 文件，我使用这个 jquery ajax：

$('#order').on('submit', function(e){
    e.preventDefault();

    var file_name = $('.image').val();              
    var formData = new FormData(this);          
    formData.append('fileupload',$( '.image' )[0].files[0], file_name); // image

    $.ajax({
        url: 'order.php',
        data: formData,
        processData: false,
        contentType: false,
        type: 'POST',
        success: function(data){
            $('.alert-success').show(); 
            $('.alert-success').html(data);

        }
    });

    $('#order')[0].reset();
    return false;
});

所有数据都由php文件正确处理。

问题：

我只能在选择上传文件时提交。但是不需要上传文件。所以人们不得不选择在不上传文件的情况下从文本字段发送数据。

我发现它与formData.append 行有关当我注释掉这一行时，现在只能提交文本字段的值。

那么：我怎样才能使文件上传不需要，这样就可以在不上传文件的情况下提交？

【问题讨论】：

您应该尝试使用 js 或 jquery 使用 input type="file" 的 id 删除 required 属性

标签： jquery ajax forms append form-data

【解决方案1】：

如果现在选择了文件，则也没有要附加的内容。所以把它放在一个条件中：

var formData = new FormData(this);
var file_name = $('.image').val();  
if(file_name != '') { // if file input is not empty
    formData.append('fileupload',$( '.image' )[0].files[0], file_name); // image
}

【讨论】：