单击“提交”时选择图像并发送数据

时间:2018-04-18 05:24:25

标签: php html session

我有5张图片代表了兴趣,如远足,游泳,单板滑雪,跑步,攀爬。我希望用户能够点击他们想要的许多图像,然后一旦他们点击提交,我想将每个图像的数据发送到下一页。这些数据将是“徒步旅行”,“游泳”,“滑雪”,“跑步”,“攀爬”。

<input type="image" src="https://res.cloudinary.com/simpleview/image/upload/c_fill,f_auto,h_388,q_65,w_560/v1/clients/norway/hiking_moysalen_vesteralen_norway_0a6be0ac-16ad-4d48-b3d9-f58a25bcb1a2.jpg" name="hiking" >
  <input type="image" src="https://www.wellandgood.com/wp-content/uploads/2017/05/Stocksy-Friends-Eatting-Jill-Chen.jpg" name="climbing" >
  <input type="image" src="http://coresites-cdn.factorymedia.com/mpora_new/wp-content/uploads/2016/08/Snowboarding-Beginners-Tips-Advice-UK.jpg" name="snowboarding" >
  <input type="image" src="http://media.beam.usnews.com/59/52/2464cc9d45a791a798e244c87fd0/161101-comparemilk-stock.jpg" name="swimming" >
  <input type="image" src="https://cf.ltkcdn.net/online/images/std/211032-674x450-Friends-playing-video-games.jpg" name="running">

我只知道如何通过文本输入发送数据,是否可以使用图像输入?

2 个答案:

答案 0 :(得分:1)

如果您在页面上有图像,则需要创建复选框以选择这些图像。您的HTML应该是这样的

<form method="post" enctype="multipart/form-data" action="your.php">
    <div>
        <img src="your image">
        <div class="checkbox">

            <label>
                <input type="checkbox" value="image value" name="images[]">
                Checkbox
            </label>
        </div>
    </div>
    <div>
        <img src="your image">
        <div class="checkbox">

            <label>
                <input type="checkbox" value="image value" name="images[]">
                Checkbox
            </label>
        </div>
    </div>
    <button type="submit" name="submit">Submit</button>
</form>

your.php文件应该是这样的

if (isset($_POST['submit'])) {
    $images=$_POST['images'];
    foreach ($images as $image) {
        echo $image;
        echo '<br>';
        //Do something
    }

}

答案 1 :(得分:1)

简单纯HTML代码

<form method="POST" action="" >

    <label for="imageOne">
        <img src='https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png' width='100' /></label>
    <input type="checkbox" name="image[]" id="imageOne" value="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"><br>

    <label for="imageTwo">
    <img src='https://static.xx.fbcdn.net/rsrc.php/v3/yc/r/GwFs3_KxNjS.png' width='100' /></label>
    <input type="checkbox" name="image[]" id="imageTwo" value="https://static.xx.fbcdn.net/rsrc.php/v3/yc/r/GwFs3_KxNjS.png"><br>

    <label for="imageThree">
    <img src='https://html.com/wp-content/uploads/flamingo.jpg' width='100'  /></label>
    <input type="checkbox" name="image[]" id="imageThree" value="https://html.com/wp-content/uploads/flamingo.jpg"><br>

    <input type="submit" value="Submit">

将下面的代码写在同一个文件的末尾

<?php 
  echo '<pre>';
     print_r($_POST);
  echo '</pre>';
?>

Demo Result Image