4

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

<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

谁能告诉我我在这缺少什么？

4

2 回答 2

2

您需要防止提交表单的默认操作：

$('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 标头，否则会丢失边界字符串，这可能是你的服务器错误的原因。

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

于 2012-08-04T19:23:01.467 回答
1

这是使用 jquery Ajax 提交表单的最简单形式。我没有对此进行测试，但它应该可以工作:-)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Test form</title>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#sbmt').click(function(){
            var text1 = $('#text1').val();
            var text2 = $('#text2').val();
            /// validation of inputs
            ///then
            $.ajax(
            {
                url :'submit.php',
                type : 'post',
                        data :  {'text1' : text1, 'text2' : text2 },
                success: function(data){
                        alert("form submitted . response is :"+ data);
                    }
            }
            ).fail(function(){alert("Failed!!");});
            });
        });
    </script>
</head>
<body>
    <form id="myform">
        <input type="text" id="text1" />
        <input type="text" id="text2" />
        <input type="button" id="sbmt"  value="submit"/>
    </form>
</body>
</html>
于 2012-08-04T19:09:15.543 回答