学習日記 20231011

6:22 2023/10/11
でも自分が参考にしているサービスは一度トリミングした場合、
再度変更するためには、トリミング結果を一度削除しないといけない。
ということは、やっぱり一度消してよさそうだね。

htmlフォームにおいてファイル名を非表示のまま、アップロードさせる方法

<style>
  .hidden-input {
    display: none;
  }
</style>

<input type="button" value="ファイルを選択" onclick="document.getElementById('fileInput').click()">
<input type="file" id="fileInput" class="hidden-input" name="up_image">

ということは画像アップロードをするうえで
フォームから画像ファイルをアップする
->プレビュー画像ファイルとトリミング操作可能表示がされたモーダルウィンドウが開く。
　この時点で元画像ファイルがフォームのfilesにセットされる。
->範囲を選択して、トリミングボタンを押下すると
　トリミング画像データファイルがフォームのfilesにセットされる。
　同時にトリミング画像がプレビューとしてフォームに表示される。
->(もしするなら)画像を変更するためにプレビュー画像を削除
->フォームにセットされているデータとcropperをリセット。
->再度フォームからファイルを選択
->プレビュー画像ファイルとトリミング操作可能表示がされたモーダルウィンドウが開く。
　この時点で元画像ファイルがフォームのfilesにセットされる。
->キャンセルを押す。
->フォームのfilesにセットされているデータを消し、cropperもリセットする

でいいね。
方針決まったことだし、夜やろうかな。
7:16 2023/10/11