2

私はAJAXを初めて使用し、名前とファイルをphpファイルにアップロードしてデータを処理し、mysqliを使用して挿入するためにデータベースに送信するフォームの実装に取り​​組んでいます。私はphpファイルをテストしましたが、動作します。私の問題はAJAXコードにあります。XMLHTTPとjQueryを使用した実装を試しました。どちらもページを離れ、ブラウザでPHPファイルを開きます。不平を言う人として、私はこの質問を別のコーディングサイトに投稿し、2人のポスターの間で争いが起こったので、生産的な提案で合理的で落ち着いた応答を得るためにここで努力しています。

現在、「get」は「post」ではなくPHPファイルに送信されていることを認識していますが、PHPStormは、「post」はその形式では使用できないと言っています。私の選択肢は何ですか？私は正しい方向に進んでいますか、それとも私が進むべき別の方向性がありますか？フォームのみを更新し、PHPページが読み込まれないようにするにはどうすればよいですか？

これが私のコードの関連するスニペットです、

<!DOCTYPE html>
<html>
<head>
    <script src="jquery.min.js"></script>
    <script src="jquery.validate.js"></script>
    <script>
        $(document).ready(function() {
            $('#addForm').validate({

                submitHandler: function (form) {
                    $('input[name="usingAJAX"]', this).val('true');
                    var url = $(form).prop('action');
                    var dataToSend = $(form).serialize();
                    var callback = function(dataReceived) {
                        $(form).hide();
                        //result message
                        $('body').append(dataReceived)
                    };
                    var typeOfDataToReceive = 'html';

                    $.get(url, dataToSend, callback, typeOfDataToReceive),
                    return false;
                }
            });
        });

    </script>
</head>
<body>
<form id="addForm" action="addInfo.php" enctype="multipart/form-data">
    <input type="hidden" name="usingAJAX" value="false"/>
    <label for="aname">Name: </label>
    <input type="text" name="aname" id="aname" class=required/>
    <label for="aimage">Photo: </label>
    <input id="aimage" type="file" name="aimage" class="required">
    <input type="submit" value="ADD"/>
</form>
</body>
</html>
4

2 に答える 2

1

最近まで、ajax を使用してファイルをアップロードすることはできませんでした。

ファイルを ajax で直接アップロードすることはできませんが、HTML5 File API を使用してプログラムでアップロードできます。

それでも、単純なソリューションを探している場合は、従来の IFrame アプローチを試してください。

最先端のテクノロジーが必要な場合は、File API を使用してください。ここでは、javascript を使用してファイルを読み取る方法についていくつかのチュートリアルを示します。

ajax でアップロードする手順:

  1. javascript FileReader API でファイルを読み込みます。
  2. base64 などにエンコードされたファイルのコンテンツをサーバーに投稿します。
  3. サーバー側で、ファイルの内容をプログラムでデコードします。

このアプローチを使用すると、ファイルはサーバーによってファイルのアップロードとして処理されません。これは、テキストが含まれる別のリクエスト フィールドです。サーバー側でデコードするのはあなた次第です。

filereader API を使用すると、ファイルを部分ごとに読み取り、ファイルのフラグメントをアップロードできるため、巨大なファイルをチャンクでアップロードすることは可能ですが、自分で処理する必要があります。

于 2013-03-12T16:29:53.440 に答える
0

プラグイン jQuery を使ってみる form.js http://www.malsup.com/jquery/form/#file-upload ajax と jQuery でファイルをアップロードできます。使い方は簡単#form-idで、ajaxSubmit 関数を指定するだけです。 

    <script>
    $(document).ready(function() {
        $('#addForm').validate({

            submitHandler: function (form) {
                $('input[name="usingAJAX"]', this).val('true');
                var options = {
                   url : $(form).prop('action'),
                   dataToSend : $(form).serialize(),
                   callback : function(dataReceived) {
                    $(form).hide();
                    //result message
                    $('body').append(dataReceived) },
                   typeOfDataToReceive = 'html';
                     //your options here 
               };

               $('#yourFormid').ajaxSubmit(options);

                return false;
            }
        });
    });

</script>
于 2013-03-12T16:05:39.013 に答える