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

Question

>i 使用图像选择器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

我测试并看到了控制台.log输出，它的工作显示数组，就像

http://placekitten.com/220/200
http://placekitten.com/180/200
http://placekitten.com/130/200
http://placekitten.com/270/200

但不是为了保存.php

Answer 1

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

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