如何将数组数据从 javascript 图像选择器发送到 php 请求

Question

我使用图像选择器 http://rvera.github.io/image-picker/ 。有多个选定的图像，我想将输出数据从 javascript 数据发送到 php 表单提交，示例代码在这里

HTML/JS

<div role="group" aria-label="Image Option Buttons">
  <div class="btn-group">
    <a href="#" id="toggleAll" data-toggle="" aria-pressed="false" autocomplete="off"> Select All</a>
  </div>
</div>

<select multiple='multiple' class='image-picker show-labels show-html hide' name='imageList'>
     <option data-img-src="http://placekitten.com/220/200" name="satu" value="satu">Cute Kitten 1</option>
     <option data-img-src="http://placekitten.com/180/200" value="dua">Cute Kitten 2</option>
     <option data-img-src="http://placekitten.com/130/200" value="3">Cute Kitten 3</option>
     <option data-img-src="http://placekitten.com/270/200" value="4">Cute Kitten 4</option>
</select>

<form method="post" name="myform" action="save.php">
  <input type="hidden" name="data" value="">
  <input type="submit" name="send" value="submit" onclick="imgg()" />
</form>



<script type="text/javascript">
  $(".image-picker").imagepicker({

  });


  function imgg() {
    $("*[multiple=multiple]").find("option:selected").each(function(index, item) {
      var src = $(item).attr("data-img-src");
      document.myform.data.value = src;
      document.forms["myform"].submit();
      console.log(src);
    });

    $('#toggleAll').on('click', function() {
      // click event listener 
      if ($(this).attr('aria-pressed') == 'false') {
        //checks if toggled on or off, any other property can be used
        $('.image-picker').find($('option')).prop("selected", "selected");
        //looks for the image picker option list and sets everything to selected
        $('.image-picker').data('picker').sync_picker_with_select();
        //now triggers the sync function to reinitialise all of the selected images. 

        $('.image-picker').find($('option')).prop("selected", "selected").each(function(index, item) {
            $("submit").click(function() {
              var src = $(item).attr("data-img-src");
              document.myform.data.value = src;
              document.forms["myform"].submit();
              console.log(src);
            });
        });

      } else {
        //does the exact opposite of above. 
        $('.image-picker').find($('option')).prop("selected", false);
        $('.image-picker').data('picker').sync_picker_with_select();
        console.log($(item).attr("data-img-src"));
        $('.image-picker').find($('option')).prop("selected", "selected").each(function(index, item) {

        });
      }

    });

  }
</script>

PHP

if (isset($_POST['data'])) {

    $names = $_POST['data'];

  print_r ($names) ;
}

但这仅显示一个值，例如 http://placekitten.com/270/200

我测试并查看了 console.log 输出，它可以像显示数组一样工作

http://placekitten.com/220/200

http://placekitten.com/180/200

http://placekitten.com/130/200

http://placekitten.com/270/200

但不用于 save.php

Answer 1

function imgg(){
$("*[multiple=multiple]").find("option:selected").each(function(index, item){ ...

我想我发现问题是你使用的选择器只是用于“选择”选项，难怪为什么输出值应该只有一个值。