jQueryを使用した画像管理実装メモ

メモ

JavaScript(jQuery), PHPを使用しての画像管理処理機能の実装メモです。
仕様としては、画像登録、画像削除の機能および一覧です。

登録は、id="file"でfileインプットを呼び出してonchange 画像を選んだら submitさせます。
削除は、対象チェックがついたものをjQueryで抽出しjsonで整形、PHPで配列に戻し処理します。

location.hrefのdeleteフラグはフレームワークによってはviewが更新されなかったので当方のほうでフラグとして更新をかけてますが、プレーンなものではいらないかもしれません。locationがajax的にかっこ悪いです･･･。

hoge.html

<script>
$(function() {
    //画像アップロード
    $("#file").change(function() {
        $(this).closest("form").submit();
    });
    //画像削除
    $("#close").click(function() {
        area = $('[type="checkbox"]:checked').map(function(){
          return 'area[]=' + $(this).val();
        }).get().join('&');

        $.ajax({
            url: '/edit/',
            type: 'post',
            data: {
                checked: area
            },
            timeout: 10000,
            dataType: 'json',
            cache: false,
            complete: function(xhr, textStatus) {
                location.href = "/edit/index.php?delete=1";
            }
        });
    });
});
</script>

hoge.html

<form action="/edit/" method="POST" name="form" enctype="multipart/form-data">

    <button type="button" onclick="$('#file').click();" >アップロード</button>
    <button type="button" id="close" >デリート</button>


    <div class="hoge">
        <div class="box-img">
            <img src="/images/hoge1.jpg">
        </div>
        <p class="center">hoge1.jpg</p>
        <label class="checkbox"><input type="checkbox" name="check[]" value="hoge1.jpg"></label>
    </div>

    <div class="hoge">
        <div class="box-img">
            <img src="/images/hoge2.jpg">
        </div>
        <p class="center">hoge2.jpg</p>
        <label class="checkbox"><input type="checkbox" name="check[]" value="hoge2.jpg"></label>
    </div>

    <div class="hoge">
        <div class="box-img">
            <img src="/images/hoge3.jpg">
        </div>
        <p class="center">hoge3.jpg</p>
        <label class="checkbox"><input type="checkbox" name="check[]" value="hoge3.jpg"></label>
    </div>


    <input type="file" id="file" name="file" accept=".jpg,.png" style="display:none;" onchange="$('#file').click();"/>
</form>

index.php

<?php
$Path ='/hoge/';
$deleteFlg = $_GET["delete"];

$checked = array();
$query = $_POST["checked"];
parse_str($query, $checked);


if(count($checked['area'])){
    //削除処理
     foreach ($checked['area'] as $value){
         $filePath = $Path . $value;
         unlink($filePath);
     }
}elseif($deleteFlg!=1) {
    //登録処理
    move_uploaded_file($_FILES['file']['tmp_name'], $Path . $_FILES['file']['name']);
    $imgPath = $Path . $_FILES['file']['name'];
    $imgData = getimagesize($imgPath);
}

//既存ファイル読込処理
$imgList = array();
$resDir = opendir($Path);
while($filename = readdir($resDir)){
    if($filename != '.' || $filename != '..' ){
        $imgList[] = $filename;
    }
}