画像のアップロードとサムネイル表示

画像をアップロードし、その画像をサムネイル表示する

HTML部分

<div class='image-preview-wrapper'>
 <input type="file" name="cs_regident_image" id="cs_regident_image">
 <button type="button" onclick="file_upload()">アップロード</button>
 <img id="cs_regident" style="height:200px;" />
</div>

JavaScript部分。Ajaxを使ってPHPプログラムに渡してファイルをアップロードする。

<script>

  $('#cs_regident_image').change(function(e){
    //ファイルオブジェクトを取得する
    var file = e.target.files[0];
    var reader = new FileReader();
 
    //画像でない場合は処理終了
    if(file.type.indexOf("image") < 0){
      alert("画像ファイルを指定してください。");
      return false;
    }
 
    //アップロードした画像を設定する
    reader.onload = (function(file){
      return function(e){
        $("#cs_regident").attr("src", e.target.result);
        $("#cs_regident").attr("title", file.name);
      };
    })(file);
    reader.readAsDataURL(file);
 
  });

function file_upload()
{
    // フォームデータを取得
    var formdata = new FormData($('#form').get(0));

    // POSTでアップロード
    $.ajax({
        url  : "http://localhost/wpn/wp-content/..../includes/upload.php",
        type : "POST",
        data : formdata,
        cache       : false,
        contentType : false,
        processData : false,
        dataType    : "html"
    })
    .done(function(data, textStatus, jqXHR){
        alert(data);
    })
    .fail(function(XMLHttpRequest, textStatus, errorThrown){

    });
}
</script>

PHPファイル「upload.php」

// 一時アップロード先ファイルパス
$file_tmp  = $_FILES["cs_regident_image"]["tmp_name"];

// 正式保存先ファイルパス
$file_save = "./upload/" . $_FILES["cs_regident_image"]["name"];

// ファイル移動
if( !move_uploaded_file($file_tmp, $file_save )) {
    $err_msg = 'アップロードに失敗しました。';
}
$err_msg = 'アップロードに成功しました。';
echo $file_save;
/*
$result = @move_uploaded_file($file_tmp, $file_save);
if ( $result === true ) {
    echo "UPLOAD OK";
} else {
    echo $file_save;
}*/

※セキュリティが非常に重要になるので、以下の参考サイトを確認しなければならない。

参考URL

https://qiita.com/yasumodev/items/cffb735f46ffd489a4db

[jQuery] 画像アップロード時にプレビュー表示する（imageタグ版）

https://thinkit.co.jp/story/2015/06/11/6118