3

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>
<title>userList</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
//choose div containg all the images:
<div id="choose"><div id="inside">PICK AN IMAGE:<hr>
//the images will be loaded here in this form
<form type="" method="post" action="">
<input type="image" id="send" name="send" value="images/Woman-02-june.png" src="images/Woman-02-june.png"/>
<input type="image" id="send" name="send" value="images/Man-01-June.png" src="images/Man-01-June.png"/>
</form>
</div></div>
//list div that would display the images the user has chosen
<div id="list"><?php
if(file_exists("list.html") && filesize("list.html") > 0){
    $handle = fopen("list.html", "r");
    $contents = fread($handle, filesize("list.html"));
    fclose($handle);

    echo $contents;
}
?></div>
</body>
</html>

そのため、ユーザーが画像をクリックすると、送信されたデータをファイルに書き込むスクリプトに送信されることが想定されています。ファイルが読み込まれ、「リスト」に表示されます。スクリプトは次のとおりです。

<?php
//get data from array
$pikc=$_POST['send'];
//open file to append
$fp=fopen("list.html", 'a');
//write data to file
fwrite($fp,  "<div class='msgln'>"."<img src=\"".$pikc."\">"."<br>"."</div>");
//close the file        
fclose($fp);


?>

ご覧のとおり、送信されるデータはクリックされた画像の「値」であるため、画像が取得され、画像のマークアップに含めるために連結が実行されます。これを行うには ajax を使用する必要があることはわかっているので、そのための ajax を次に示します。

<script type="text/javascript" src="jquery-1.8.0.min (1).js"></script>
<script type="text/javascript">
$(document).ready(function(){
//If user submits the form
$("#send").click(function(){    
    var clientmsg = $("#send").val();
    $.post("post.php", {send: clientmsg});              

    return false;
});

});
</script>

次に、「リスト」の自動スクロールと一定の表示を可能にする別の機能を含めます。問題はありません。正常に機能しているため、投稿しません。問題は、最初の画像をクリックするたびに、すべて問題ないように見えます。データはリロードせずにスクリプトに送信されますが、2 番目の画像をクリックすると、ブラウザによってスクリプト ページに移動しますが、ファイルはコンテンツで更新されます。リロードやリダイレクトを停止するには、どうすればこれを修正できますか? これは単なる「模擬テスト」であることに注意してください。実際には mysql データベースからデータが読み込まれます。そのため、両方の画像に同じ ID を使用しました。次のようになります。

//after establishing mysql connection, loading data from database, etc
echo "<form method="post" action="">
//fetch array that is holding the loaded data
while ($row=mysql_fetch_array)
{
$row['img_path']=$image;    
//echo the data within the form
echo "<input id="send" type="image" value=\"".$image."\">"."<img src=\"".$image."\">";
}

echo "</form>"

データベース内のすべての画像パスが選択され、それらを使用してそれぞれの画像が表示されるように、300 以上の画像があります。次に、フォームを ajax 経由でスクリプトに送信する必要があり、私の例と同じことが起こるはずです。ID に問題がある場合、300 枚の画像の ID を手動で書き込むことはできません!フォームにIDを与えてからajaxプロセスで使用しても問題ないと思います.間違っていない限り、画像が送信されないか、すべてが送信されるのではないかと心配しています. それで、どうすればこれを修正できますか？事前にありがとう、私はプログラミングに非常に慣れていないので、親切に助けを求めます。(実際のバージョンでは、各ユーザーは独自の「リスト」ファイルとアカウントを持つことに注意してください)。ありがとう、同じことを達成するための別のアプローチであっても、何でも感謝します。

4

1 に答える 1

1

いくつかのこと：

表面的には、少しdivitisを持っているように見えます:<div>の周りの2<form>はおそらく必要ありません (特に、フォームという 1 つの要素だけを囲んでいるため)。

sendid を再利用したことを認識しており、実際の実装では変更されることに注意してください。ただし、投稿したphpからはinput、同じ複数の sidがまだエコーされているようです。これにより、javascriptに多くの問題が発生する可能性があります(何もしないか、予期しない結果が生じる可能性があります)。を使用する代わりに を使用するとどうなりidますclass="send"か?

<form id="choose" method="post">
    <input type="image" class="send" name="send[]" value="Woman-02-june.png" src="images/Woman-02-june.png" />
    <input type="image" class="send" name="send[]" value="Man-01-June.png" src="images/Man-01-June.png" />
</form>

そして、jQuery でそれらを参照する必要がある場合は、$('#choose').find('.send'). さらに、フォーム要素のデータをグループの一部にしたい場合はname="send[]"、配列を作成するために使用できます:$_POST["send"]数値配列になります (または、次のように連想配列にすることもname="send[FOO]"できFOOます:引用符で囲みます）。

ただし、一度に 1 つの入力の値のみが送信されるため、この状況で入力をグループ化することは不要です。ユーザーがフォームを送信する前に複数の画像を選択できるようにフォームを変更した場合に適用できます (ユーザーが画像を un/click したときに jquery を介して un/checked される非表示のチェックボックスを使用します)。送信前に複数選択を許可すると、AJAX は次のようになります。

$(function(){//short-hand for $(document).ready()
    $('#choose').submit(function(event){
        var form_data = $(this).serialize();
        $.post("post.php", {data:form_data}, function(){
            //stuff to do upon successful AJAX call
            var items;
            for ( var bio_img in form_data.send )
                { items += '<li>'+bio_img+'</li>'; }
            //replace contents of <div id="list">
            //with the values of the input elements
            $('#list').html('<ul>'+items+'</ul>');
        });//$.post()
        event.preventDefault(); return false;//I double up just to be sure
    });//form submit
});//document.ready

さもないと：

$(function(){//short-hand for $(document).ready()
    $('#choose').submit(function(event){
        var form_data = $(this).serialize();//has data from only 1 input
        $.post("post.php", {data:form_data}, function(){
            //stuff to do upon successful AJAX call
            //assuming 'send' was not made an array in the input's name:
            //eg name="send" and not name="send[]"
            $('#list').find('ul').append('<li>'+form_data.send+'</li>');
        });//$.post()
        event.preventDefault(); return false;//I double up just to be sure
    });//form submit
});//document.ready

最後に、安全ではない基本的な php mysql 関数を使用しているようです (php ドキュメントのmysql-fetch-arrayに関する警告メッセージを参照してください)。PHP データ オブジェクト (PDO)を検討することもできます。

編集:質問の編集から、AJAX経由で画像ファイルを送信することを心配しているようです。ただし、コードにはファイル アップロードの入力はありません。ユーザーが行っているのはオプションの選択だけであり、ファイルは既に存在します ( を介して参照しているため<input type="image" … src="…")。画像ファイル自体ではなく、ユーザーの選択のみを送信しています。

于 2012-09-30T22:07:06.277 に答える