複数画像のアップロード

Question

phpとJavascriptの初心者で質問させていただきます。

現在下記のようなソースで、一つずつ選択した画像をアップロードし、
並び替える仕様なのですが、
複数の画像を一度に選択してアップロードし、並び替えられる仕様に変えたいと考えています。

下記のソースをどのように書き換えれば良いか、
ご教示いただけないでしょうか。
（現在、最大4枚の場合ですが、枚数に関わらず動くようにしたいです。）
どうぞよろしくお願いいたします。

<div>
<form action="image1_input.php?id=<?=$ID?>" method="post" enctype="multipart/form-data">
<div class="IMAGE_SHINKI">
<?php for($i=1;$i<=10;$i++){
$j=sprintf("%02d",$i);
?>
<span>写真<?=$j?>：<input type="file" name="upfile<?=$i?>" size="100" /></span>
<?php }?>
</div>
<input class="SEND" type="submit" value="アップロード">
</form>
</div>


<strong>画像　※ドラッグ＆ドロップで順番を入れ替える</strong>

<?php
$PHOTO_SPLICE = array_chunk($PHOTO,4);
foreach ((array) $PHOTO_SPLICE as $key => $value) {
    $sort[$key] = $value[3];
}
array_multisort($sort, SORT_ASC, $PHOTO_SPLICE);
?>

<form method="post" action="image2.php?id=<?=$ID?>" enctype="multipart/form-data">

<ul id="sortable" class="sortable">
	<?php for ($i=0; $i < count($PHOTO_SPLICE); $i++) : ?>
	<li class="sortable_photo" id="photo<?=$i+1?>">
		<div class="number"><?php echo $i+1; ?>枚目</div>
		<div class="delete">×</div>
		<div class="PHOTO"><img src="../../img/mansion_new_img/<?=$PHOTO_SPLICE[$i][0]?>"></div>
	</li>
<?php endfor ?>
</ul>
<input type="hidden" name="photo_cnt" value="<?=$i?>" id="photo_cnt"/>
<input type="submit" class="SEND" value="保存" />
<span class="UP_ALART UP_ALART_S">保存後、図面が登録できます。</span>
</form>



<script type="text/javascript">
$(window).load(function(){
 var height = $("#sortable").innerHeight();
 $("#sortable").height(height);
});

$('.delete').on('click',function(){
		$(this).parent().remove();
		$('#sortable li').each(function(i){
				$(this).attr('id','photo' + (i+1));
				$(this).find(".number").html((i+1)+'枚目');
				$(this).find("#photo_order").val((i+1));
				$(this).find("#photo_cnt").val((i+1));
				var height = $("#sortable").innerHeight();
				$("#sortable").height(height);
		});


})

$(function(){

$("#sortable").sortable({
revert: true ,
cursor   : 'move' ,
tolerance: 'pointer' ,

update: function(event, ui) {
	$(function(){
    $('#sortable li').each(function(i){
        $(this).attr('id','photo' + (i+1));
				$(this).find(".number").html((i+1)+'枚目');
				$(this).find("#photo_order").val((i+1));
				$(this).find("#photo_cnt").val((i+1));
				var height = $("#sortable").innerHeight();
				$("#sortable").height(height);
    });
});
}
})
//.disableSelection();
});
</script>

Comments

[yambejp]

multiple処理ではなくinputを分けたい意味はあるのでしょうか？

Answer 1

どういう動作になるかソースではわからないのと、複数画像のアップロードというタイトルなので、

<div>
<form action="image1_input.php?id=<?=$ID?>" method="post" enctype="multipart/form-data">
<div class="IMAGE_SHINKI">
<?php for($i=1;$i<=10;$i++){
$j=sprintf("%02d",$i);
?>
<span>写真<?=$j?>：<input type="file" name="upfile<?=$i?>" size="100" /></span>
<?php }?>
</div>
<input class="SEND" type="submit" value="アップロード">
</form>
</div>

ここの部分でボタン押してファイル選択されたらにファイルタグが自動的に増えるとかならば
フォームから複数のファイルをアップロード(入力欄の動的追加・削除)

ここらへん参考にして、動的に増やすとかかな
(ただ単にファイル選択時に複数ファイル選択可能にするならばmultiple属性をつけるだけ)