Question

我在LightBox中使用Form，其中包含一些输入元素。

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

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

Answer 2

这是使用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>

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

2 个答案: