[SPRING]アップロードファイルを削除、ファイルオブジェクト-(5)

12841 ワード
Multipart テキストリンク

アップロードファイルの削除

  • にアップロードされたファイルを削除すると、ファイルのURLとして扱いやすくなります.
  • ファイルのURL自体は、削除するファイルの場所を検索および削除するための「年/月/日/uuidファイル名」から構成されています.
  • Upload Controlにremovefile()メソッドが追加されます.
  • removeFile()は、パスとUUIDを含むファイル名をパラメータとして受信し、削除結果をBooleanタイプとして送信する.
  • removeFile()では、ソースファイルとサムネイルファイルを削除する必要があります.
  • removeFile()元のファイルの名前をパラメータとして送信し、Fileオブジェクトを使用して元のファイルとsymタグを同時に削除します.
    •  /** 업로드 파일 삭제
     */
    @PostMapping("/removeFile")
    public ResponseEntity<Boolean> removeFile(String fileName){

        String srcFileName = null;

        try{
            srcFileName = URLDecoder.decode(fileName,"UTF-8");
            //UUID가 포함된 파일이름을 디코딩해줍니다.
            File file = new File(uploadPath +File.separator + srcFileName);
            boolean result = file.delete();

            File thumbnail = new File(file.getParent(),"s_"+file.getName());
            //getParent() - 현재 File 객체가 나태내는 파일의 디렉토리의 부모 디렉토리의 이름 을 String으로 리턴해준다.
            result = thumbnail.delete();
            return new ResponseEntity<>(result,HttpStatus.OK);
        }catch (UnsupportedEncodingException e){
            e.printStackTrace();
            return new ResponseEntity<>(false,HttpStatus.INTERNAL_SERVER_ERROR);
        }
    }

    ブラウザからファイルを削除

  • ブラウザには、各ファイルを削除できるボタンが追加されます.
  • ボタンと画像を1つの<div>に組み合わせる必要がある.
  • では、ボタンと画像を同時に削除できます.
  • アップロードプロセスを処理する部分は、UploadExによってボタンを追加することができる.htmlを変更します.
    •   // 추가 
     // Ajax 업로드 이후 이미지들을 호출하는 함수 
     function showUploadedImage(arr){

        console.log(arr);

        var divArea = $(".uploadResult");

        var str = "";

        for(var i =0; i<arr.length; i++){
                str += "<div>";
                str += "<img src='/display?fileName="+arr[i].thumbnailURL+"'>";   
                str += "<button class='removeBtn' data-name='"+arr[i].imageURL+"'>Remove</button>";
                str += "</div>";   
        }
        divArea.append(str);
  • 関数の内部に<div>タグを作成し、<img>タグ、<button>タグを<div>内部に追加します.
  • が追加された<button>タグは、「data-name」という名前のcustomプロパティを指定するために使用され、ボタンをクリックするときに削除するファイルの名前を決定します.
  • ブラウザからファイルをアップロードすると、次の図に示すボタンが追加され、サーバにソースファイルとサムネイルファイルが作成されていることがわかります.
  • 画面で、「Remove」ボタンをクリックして、次のアクションを作成します.
    •      $(".uploadResult").on("click",".removeBtn",function(e){

        var target = $(this);
        var fileName = target.data("name");
        var targetDiv = $(this).closest("div");

        console.log(target);
        console.log(fileName);
        console.log(targetDiv);

        $.post('/removeFile',{fileName : fileName}, function(result){

            console.log(result);
            if(result === true){
                targetDiv.remove();
            }
        })
     })
  • アップロード結果生成された<div>は動的に生成されるため、クリックイベントを直ちに処理することはできないため、委任された方法でイベントを処理する必要がある.
  • 削除操作はPOST方式で呼び出され、通常、サーバからソースファイルとサムネイルファイルが削除されると、その画像を含む<div>が削除される.
  • から$(this)、$(this)の順になります.data("name"), $(this).closest("div)

    • ファイルオブジェクト


    Fileオブジェクトを試して学習した後、いくつかのFileオブジェクトを作成する方法をまとめました.

    ファイルオブジェクトの定義

  • ファイルオブジェクトは、ハードディスク(HDD)上の実際のファイルまたはディレクトリではなく、パスまたは参照を抽象化するオブジェクトです.
  • ファイルオブジェクトは、新しいファイルへのパスまたは作成するディレクトリをカプセル化します.

    • ファイルオブジェクトの用途

  • 物理ファイルシステムのカプセル化パス名を確認し、実際のファイルまたはディレクトリに対応するパス名を
    • と決定する.
  • ファイルストリームオブジェクトの作成時:

    • ファイルオブジェクトの作成

  • パラメータを使用してStringオブジェクトを渡します.
    -Ex) File mtDir = new File("/Data/User/JDK 1.3.0/src/java/io");
    -ファイルクラスの作成者は、パラメータに渡されるパスをチェックしません.
    • 1番目の面パラメータを使用して親ディレクトリ内のファイルオブジェクトを渡し、2番目の面パラメータを使用してStringオブジェクトを渡します.
    -親ディレクトリ-ファイルを含むディレクトリ
    Ex) File thumbnail = new File(file.getParent(),"s_"+file.getName());
  • 最初のパラメータは親ディレクトリのパスをStringオブジェクトに渡し、2番目のパラメータはStringオブジェクト
    • である.
  • URL
    • を使用

    絶対パスと相対パス

  • 絶対パス:プレフィックス(C:、C://)を含むパス.
    Ex)cdc:/java/APIこの経路移動の方法は完全経路
    • である.
  • 相対パス:接頭辞なしパス
    −EX)cd javaのような経路移動方法は経路
    • に対して

    ファイル・オブジェクトに関する情報を取得する方法


    -getName():パス以外のファイルの名前.つまり、パスの最後の部分をStringオブジェクトに復元します.
    -getPath():ファイルまたはディレクトリ名を含むファイルオブジェクトのパスをStringに返します.
  • isAbsolute():ファイルオブジェクトが絶対パスを参照している場合はtrueを返し、そうでない場合はfalseを返します.
  • getParent():現在のファイルオブジェクトが表すファイルディレクトリの親ディレクトリの名前をStringに返します.返されるパスは、ファイル名を含まない純粋なパス名です.
    -現在のディレクトリでファイル名のみを使用してファイルオブジェクトを作成し、親ディレクトリが指定されていない場合はnullを返します.

    • ファイルとディレクトリの作成と変更方法

  • mkdir():現在のファイルオブジェクトで指定したパスを使用してディレクトリを作成します.このメソッドは作成に使用します
    作成するディレクトリの親ディレクトリが事前に存在しない場合は、失敗します.
    -このメソッドが成功した場合はtrueを返します.そうでない場合はfalseを返します.
  • mkdirs():現在のファイルオブジェクトが表すディレクトリを作成し、必要なすべての親ディレクトリを作成します.新しいディレクトリの作成に成功した場合はfalseを返し、そうでない場合はtrueを返します.
    -メソッドがfalseを返しても、親パスの一部が作成されている可能性があります.
  • delete():現在のファイルオブジェクトが表すファイルまたはディレクトリを削除することによって正常に削除された場合、trueが返されます.
    -このメソッドでは、空でないディレクトリは消去されません.
    -そのため、ディレクトリを削除するには、ディレクトリ内のすべてのファイルをクリアする必要があります.
    • fuction: decorator, dispatch
    jasper codeblock