<input type=”file”>での画像アップロード処理について

Question

PHPバージョン5.6
フレームワーク等は使用しておりません

下記のサイトを参考に画像をアップロード時に画像のサイズを縮小する
動きを実装することができたのですが、画像のファイル名をアップロード
したものに変更する方法がわかりません。

参考サイト
http://matz.hatenablog.jp/entry/2017/05/01/235824

upload.phpの
if(!move_uploaded_file($_FILES["selectImage"]["tmp_name"], 'test.jpg')){
throw new Exception('画像ファイルアップロードエラー！');
}

の「test.jpg」の部分をアップロードした画像の名前に変更に変更できればと
考えております。

初歩的な質問で大変申し訳ございませんが、何卒お力をお貸し頂けないでしょうか。
宜しくお願い致します。

<form action="" method="post" id="imageForm">
    <img src="" id="preview" />
    <canvas id="canvas"></canvas>
    <input type="file" id="imageSelect" onChange="imgDisp();" />
    <input type="button" onClick="imgUpload();" value="アップロード" />
</form>

function imgDisp() {
    var file = $("#imageSelect").prop("files")[0];
                
    //画像ファイルかチェック
    if (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") {
        alert("jpgかpngかgifファイルを選択してください");
        $("#imageSelect").val('');
        return false;
    }
                
    var fr = new FileReader();
    fr.onload = function() {
        //選択した画像をimg要素に表示
        $('#preview').attr("src", fr.result);                        
    };
    fr.readAsDataURL(file);
} 

function imgUpload() {
    //加工後の横幅を800pxに設定
    var processingWidth = 800;            
            
    //加工後の容量を100KB以下に設定
    var processingCapacity = 100000;                               

    //ファイル選択済みかチェック
    var fileCheck = $("#imageSelect").val().length;
    if (fileCheck === 0) {
        alert("画像ファイルを選択してください");
        return false;
    }
                
    //imgタグに表示した画像をimageオブジェクトとして取得
    var image = new Image();
    image.src = $("#preview").attr("src");

    var h;
    var w;

    //原寸横幅が加工後横幅より大きければ、縦横比を維持した縮小サイズを取得
    if(processingWidth < image.width) {
        w = processingWidth;
        h = image.height * (processingWidth / image.width);

    //原寸横幅が加工後横幅以下なら、原寸サイズのまま
    } else {
        w = image.width;
        h = image.height;
    }

    //取得したサイズでcanvasに描画
    var canvas = $("#canvas");
    var ctx = canvas[0].getContext("2d");
    $("#canvas").attr("width", w);
    $("#canvas").attr("height", h);
    ctx.drawImage(image, 0, 0, w, h);                          

    //canvasに描画したデータを取得
    var canvasImage = $("#canvas").get(0);

    //オリジナル容量(画質落としてない場合の容量)を取得
    var originalBinary = canvasImage.toDataURL("image/jpeg"); //画質落とさずバイナリ化
    var originalBlob = base64ToBlob(originalBinary); //画質落としてないblobデータをアップロード用blobに設定
    console.log(originalBlob["size"]);

    //オリジナル容量blobデータをアップロード用blobに設定
    var uploadBlob = originalBlob;                    

    //オリジナル容量が加工後容量以上かチェック
    if(processingCapacity <= originalBlob["size"]) {
        //加工後容量以下に落とす
        var capacityRatio = processingCapacity / originalBlob["size"];
        var processingBinary = canvasImage.toDataURL("image/jpeg", capacityRatio); //画質落としてバイナリ化
        uploadBlob = base64ToBlob(processingBinary); //画質落としたblobデータをアップロード用blobに設定
        console.log(capacityRatio);                        
        console.log(uploadBlob["size"]);
    }

    //アップロード用blobをformDataに設定
    var form = $("#imageForm").get(0);
    var formData = new FormData(form);                    
    formData.append("selectImage", uploadBlob);

    //formDataをPOSTで送信
    $.ajax({
        async: false,
        type: "POST",
        url: "upload.php",
        data: formData,
        dataType: "text",
        cache: false,
        contentType: false,
        processData: false,
        error: function (XMLHttpRequest) {
            console.log(XMLHttpRequest);
            alert("アップロードに失敗しました");
        },
        success: function (res) {
            if(res !== "OK") {
                console.log(res);
                alert("アップロードに失敗しました");
            } else {
                alert("アップロードに成功しました");
            }
        }
    });
}

// 引数のBase64の文字列をBlob形式にする
function base64ToBlob(base64) {
    var base64Data = base64.split(',')[1], // Data URLからBase64のデータ部分のみを取得
          data = window.atob(base64Data), // base64形式の文字列をデコード
          buff = new ArrayBuffer(data.length),
          arr = new Uint8Array(buff),
          blob,
          i,
          dataLen;
    // blobの生成
    for (i = 0, dataLen = data.length; i < dataLen; i++) {
        arr[i] = data.charCodeAt(i);
    }
    blob = new Blob([arr], {type: 'image/jpeg'});
    return blob;
}         

【upload.php】

<?php
try{
    if(!move_uploaded_file($_FILES["selectImage"]["tmp_name"], 'test.jpg')){
        throw new Exception('画像ファイルアップロードエラー！');
    }
    
    echo 'OK';
} catch (Exception $ex) {
    echo $ex->getMessage();
}
?>

Answer 1

「test.jpg」の部分をアップロードした画像の名前に変更に変更できれば

特段の理由がない限り、送信してきたファイル名をそのまま使うのは、できれば避けたほうがいいと考えます。というのも、これはエンドユーザーが自由に送ってくるものなので、何が送信されるかわからないからです。

連番やハッシュなど、自前でファイル名を付けるほうが安全だと思います。

Answer 2

一応Fileオブジェクトのnameプロパティで画像のファイル名が採れるので…

function imgDisp() {
    var file = $("#imageSelect").prop("files")[0];
    var name = file.name;//←ここでファイル名を取得できる
    //以下略

上記で取得したファイル名を(ajaxによる送信を通じ)なんとかしてPHPでの処理までもって行けば可能です.

NOTE:
しかし, maisumakunさんのご指摘の通り, この内容を直接サーバー側のファイル名とするのは危険を伴います.

Answer 3

以下で全体像をつかんでみてください
「send」を押すとサブミットして内容が表示されます
「ajax」を押すとバックグラウンドでデータが送られ内容がコンソールに表示されます

• send.html

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#imageForm input[type=button][value=ajax]').on('click',function(e){
    var fr = new FileReader();
    var def=$.Deferred();
    var form=$(this).closest('form');
    var name=form.find('[type=file]').attr('name');
    var action=form.attr('action');
    var file =form.find('[type=file]').prop('files')[0];
    console.log(file);
    fr.addEventListener("load", function(e){
      var fd = new FormData();
      fd.append(name, new Blob([e.target.result],{"type":file.type}),file.name );
      $.ajax({
        "url":action,
        "type":"post",
        "data":fd,
        "cache":false,
        "processData": false,
        "contentType": false,
      }).done(function(data){
        console.log(data);
      });
    });
    fr.readAsArrayBuffer(file);
  });
});
</script>
<form method="post" id="imageForm" action="recv.php" enctype="multipart/form-data">
<input type="file" id="imageSelect" name="myfile">
<input type="submit" value="send">
<input type="button" value="ajax">
</form>

• recv.php

<?PHP
print_r($_FILES);
?>

Comments

[kans00229]

yambejp様
ご回答有難うございます。

お教え頂きました、ソースで動きが解りました。
有難うございます。

アップロードする際には、元ファイルの名前をsha1でハッシュ化して
アップしたときの時間を追加する形で保存をさせたいと思います。

有難うございました。

他の皆様もご指導、ご指摘有難うございました。

Answer 4

PHP側では以下のコードで元のファイル名のみを取得できます。

$original_name = basename($_FILES["selectImage"]["name"]);

POST メソッドによるアップロード - php.net

他の方が仰っているように元のファイル名をそのまま使うのは危険だと思います。
DBに格納する等の場合は良いかと思いますが、ファイル名とする場合は以下のような方法で安全性を検証してから使われることをおすすめします。

• preg_match を使ってファイル名規則を検証
• escapeshellcmd を使ってシェル文字をエスケープ