4

入力要素を含む 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 サーブレットのサーバー側でエラーが発生しました。

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 に答える