java - 请求被拒绝，因为没有找到多部分边界

Question

我在包含一些输入元素的灯箱中使用表单。

<form name="imageUploadForm" action="uploadImage.do" method="post" enctype="multipart/form-data">
<input type="text"  id="id" name="id" style="display: none;" value="">
    <div id="fileUploaderDiv">
         <input type='file' name="file0" id ="file0"  />
    </div>
<input type="submit" value="Submit">
</form>

当我提交表单时，表单重定向到它的操作位置。我只想在不重定向用户的情况下提交表单，这样用户就可以留在灯箱上而不会丢失他的数据。

我试过为此调用 jquery ajax

var data = new FormData();
var $inputs = $('#imageUploadForm :input');
var values = {};
    $inputs.each(function() {
                values[this.name] = $(this).val();
                data.append(this.name, $(this).val());
            });
$.ajax({
                url: 'uploadImage.do',
                data: data,
                cache: false,
                contentType: 'multipart/form-data',
                processData: false,
                type: 'POST',
                success: function(data){
                   alert(data);
                }
            });

但是在我的 FileUploader servlet 的服务器端出现错误。

The request was rejected because no multipart boundary was found 

谁能告诉我我错过了什么？

Answer 1

您需要阻止提交表单的默认操作:

$('form[name="imageUploadForm"]').on('submit', function(e) {
     e.preventDefault();
     $.ajax({
            type: 'POST',
            url: 'uploadImage.do',
            data: data,
            cache: false,
            contentType: false,
            processData: false,
            success: function(data){
               alert(data);
            }
     });
});

我认为您应该在使用 FormData 类时将 contentType 选项设置为 false，强制 jQuery 不添加 Content-Type header ，否则边界字符串将丢失，这可能是您的服务器错误的原因。

您还必须将 processData 标志设置为 false，否则，jQuery 将尝试将您的 FormData 转换为字符串，这将失败。