5

jQuery を使用してサーバー側処理用の完全なフォームを送信しようとしています。フォームには、ファイルのアップロード オプションを含むさまざまなフィールドが含まれています。現時点では FormData をサポートしていないブラウザーは気にしないので、これを行うために FormData を使用しようとしています。

次の（簡略化された）jQueryコードがあります。

$("#create_event_form").submit(function(event) {
    event.preventDefault();

    var formData = new FormData($(this));

    $.post(
        "create_entity.php",
        { formData: formData },
        function(data) {
            var response = jQuery.parseJSON(data);
            if(response.code == "success") {
                alert("Success!");
            } else if(response.code == "failure") {
                alert(response.err);
            }
        }
    );
});

そして、私のサーバー側は次のようになります。

<?php
require_once('includes/database.php');


$dbh = db_connect();

$response = array();
if($_SERVER['REQUEST_METHOD'] == "POST") {
    // do some other stuff...       

    // upload entity picture and update database
    $url = $_FILES['entity_pic']['name'];
    if($url != "") {
        if($type == "user") {
            $pic_loc = "images/profiles/";
        } else if($type == "chapter") {
            $pic_loc = "images/chapters/";
        } else if($type == "group") {
            $pic_loc = "images/groups/";
        } else if($type == "event") {
            $pic_loc = "images/events/";
        }
        // upload the picture if it's not already uploaded
        if(!file_exists($pic_loc . $_FILES['entity_pic']['name'])) {
            move_uploaded_file($_FILES['entity_pic']['tmp_name'], $pic_loc . $url);
        }
        $image_query = "INSERT INTO image (entity_id, url, type) VALUES (:entity_id, :url, :type);";
        $image_query_stmt = $dbh->prepare($image_query);
        $image_query_stmt->bindParam(":entity_id", $entity_id);
        $image_query_stmt->bindParam(":url", $url);
        $image_query_stmt->bindValue(":type", $type);
        if(!$image_query_stmt->execute()) {
            die(print_r($image_query_stmt->errorInfo()));
        }
    }


    echo json_encode($response);

}

?>

および関連する HTML:

<form id="create_event_form" action="create_entity.php" method="POST" enctype='multipart/form-data'>
    <input type="file" name="entity_pic" value="Insert Photo" />
    <!-- other inputs -->
</form>

現在、おそらく FormData オブジェクトの初期化時に、不正な呼び出しエラーが発生します。jQueryでこれを行う方法の例を永遠に探してきましたが、空になっています。また、サーバー側のコードが機能することを明確にしたいと思います。formData を "formData" として PHP スクリプトに渡す場合、その中のフィールドにアクセスするにはどうすればよいですか? 「$_POST['formData']['field_name']」か、単に $_POST['field_name'] か、それともまったく別のものでしょうか?

助けてくれてありがとう。

4

2 に答える 2

15

FormDatajQueryオブジェクトではなく、コンストラクターでフォーム要素を取ります -var formData = new FormData(this);

jQuery ajax が formdata オブジェクトを処理するようにいくつかのオプションを設定したので、$.post の代わりに $.ajax を使用し、formdata 自体をデータとして渡す必要があります。

$.ajax({
  url: "create_entity.php",
  data: formData,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data) {
        var response = jQuery.parseJSON(data);
        if(response.code == "success") {
            alert("Success!");
        } else if(response.code == "failure") {
            alert(response.err);
        }
    }
});
于 2012-12-06T18:47:33.200 に答える
1

最後の質問に答えると、$_POST['field_name'] になると思います。探している実装に関する情報については、この投稿を確認してください: Sending multipart/formdata with jQuery.ajax

お役に立てれば ：）

于 2012-12-06T18:51:20.213 に答える