jquery+springbootでファイルアップロード機能を実現

この記事の例では、ファイルアップロード機能を実現するためのjquery+springbootの具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

フロントエンド

<!DOCTYPE html>
<html lang="ja">
 
<ヘッド>
    <タイトル></タイトル>
    <メタ文字セット="utf-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta name="レンダラー" content="webkit">
    <meta http-equiv="キャッシュコントロール" content="max-age=21600" />
    <meta http-equiv="Expires" content="2014 年 8 月 18 日月曜日 23:00:00 GMT" />
    <meta name="キーワード" content="">
    <meta name="説明" content="テーブル/更新.html">
</head>
 
<本文>
    <span>------------フォーム送信--------------</span>
    <br>
    <span>------------単一ファイル--------------</span>
    <form action="/metadata/metaTables/single-file" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" />
        <p>
            <input type="submit" value="送信" />
            <input type="reset" value="clear" />
        <p>
    </フォーム>
    <span>-----------単一ファイル + パラメータ->RequestParam 受信パラメータ</span>--------------</span>
    <form action="/metadata/metaTables/single-file-param" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" />
        名前：<input name="名前"></input>
        <p>
            <input type="submit" value="送信" />
            <input type="reset" value="clear" />
        <p>
    </フォーム>
    <span>------------単一ファイル + パラメータ->パラメータを受け取るオブジェクト</span>--------------</span>
    <form action="/metadata/metaTables/single-file-object" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" />
        aaa:<入力名="aaa"></入力>
        bbb:<入力名="bbb"></入力>
        ccc:<入力名="ccc"></入力>
        <p>
            <input type="submit" value="送信" />
            <input type="reset" value="clear" />
        <p>
    </フォーム>
 
    <span>------------複数のファイル（パラメータの受け渡しは単一ファイルの場合と同じです）--------------</span>
    <form action="/metadata/metaTables/many-file" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" multiple="複数" />
        <p>
            <input type="submit" value="送信" />
            <input type="reset" value="clear" />
        <p>
    </フォーム>
    <span>------------フォルダー (フォルダー下のすべてのファイル)-------------</span>
    <form action="/metadata/metaTables/dir" method="post" enctype="multipart/form-data">
        <input type="file" name="meFile" webkitdirectory ディレクトリ />
        <p>
            <input type="submit" value="送信" />
            <input type="reset" value="clear" />
        <p>
    </フォーム>
    <span>-------------Ajax は FormData 経由でファイルをアップロードします-------------</span>
    <br>
    <span>------------1. フォームフォームを使用して FormData オブジェクトを初期化し、ファイルをアップロードします-------------</span>
    <br>        
    <フォームid="ajax_formdata">
        aaa:<入力名="aaa" 値="1"></入力>
        bbb:<入力名="bbb" 値="2"></入力>
        ccc:<入力名="ccc" 値="3"></入力>
        入力<input id="ajax_formdata_file" type="file" name="meFile"/>
        <p>
            <button onclick="save()">単一入力の送信</button>
            <button onclick="remove1()">1 をクリア</button>
            <button onclick="remove2()">2 をクリア</button>
        <p>
    </フォーム>
    <span>------------2. FormData オブジェクトを使用してファイルをアップロードするためのフィールドを追加する-------------</span>
    <フォームid="ajax_formdata1">
        aaa:<入力名="aaa" 値="4"></入力>
        bbb:<入力名="bbb" 値="5"></input>
        ccc:<入力名="ccc" 値="6"></入力>
        入力<input id="ajax_formdata_file1" type="file" name="meFile"/>
        複数ファイルの送信 <input id="ajax_formdata_file2" type="file" name="meFile" multiple="multiple"/>
        入力<input id="ajax_formdata_file3" type="file" name="meFile"/>
        <p>
            <button onclick="save1()">単一入力送信</button>
            <button onclick="save2()">複数ファイルの送信</button>
            <button onclick="save3()">複数入力の送信</button>
            <button onclick="remove1()">1 をクリア</button>
            <button onclick="remove2()">2 をクリア</button>
        </p>
    </フォーム>
    <strong>バックエンドで MultipartFile を受け入れる方法は、フロントエンドで formData.append を構築する方法によって異なります</strong>
    <br>
    <strong>formData.append("meFile", ファイル オブジェクト)-->MultipartFile</strong>
    <br>
    <strong>formData.append("meFile", 複数のファイルオブジェクト)-->MultipartFile[]</strong>
 
    <script src="../../assets/hplus/js/jquery.min.js?v=2.1.4"></script>
    <script src="../../assets/jquery.form.js"></script>
    <スクリプト>
        関数保存(){
            var formData = 新しい FormData($('#ajax_formdata')[0]);
            $.ajax({
                url: '/metadata/metaTables/ajax-formdata',
                タイプ: "投稿",
                データ: フォームデータ、
                コンテンツタイプ: false、
                プロセスデータ: false、
                成功: 関数 (データ) {
                    アラート("成功")
                }
            });
        }
        関数 save1(){
            var フォームデータ = 新しいフォームデータ();
            var formJson = $('#ajax_formdata1').serializeJson();
            フォームデータ.append("num", 110)
            formData.append("テスト", JSON.stringify(formJson))
            formData.append("meFile", $('#ajax_formdata_file1')[0].files[0]);
            $.ajax({
                url: '/metadata/metaTables/ajax-formdata1',
                タイプ: "投稿",
                データ: フォームデータ、
                コンテンツタイプ: false、
                プロセスデータ: false、
                成功: 関数 (データ) {
                    アラート("成功")
                }
            });
        }
        関数 save2(){
            var フォームデータ = 新しいフォームデータ();
            formData.append("テスト", JSON.stringify({'aaa':111,'bbb':222,'ccc':333}))
            for(var f of $('#ajax_formdata_file2')[0].files)
                formData.append("meFile", f);
            $.ajax({
                url: '/metadata/metaTables/ajax-formdata2',
                タイプ: "投稿",
                データ: フォームデータ、
                コンテンツタイプ: false、
                プロセスデータ: false、
                成功: 関数 (データ) {
                    アラート("成功")
                }
            });
        }
        関数 save3(){
            デバッガ
            var フォームデータ = 新しいフォームデータ();
            フォームデータ.append('num',123456)
            for(let i=0;i<$('#ajax_formdata1 input[type="file"]').length;i++){
                for(let j=0;j<$('#ajax_formdata1 input[type="file"]')[i].files.length;j++){
                    formData.append("meFile", $('#ajax_formdata1 input[type="file"]')[i].files[j]);
                }
 
            }
            $.ajax({
                url: '/metadata/metaTables/ajax-formdata3',
                タイプ: "投稿",
                データ: フォームデータ、
                コンテンツタイプ: false、
                プロセスデータ: false、
                成功: 関数 (データ) {
                    アラート("成功")
                }
            });
        }
        関数remove1(){
            alert("入力を置き換えることで達成されました")
            // 2 番目のタイプ:
            var obj = document.getElementById('ajax_formdata_file');
            obj.outerHTML = obj.outerHTML;
        }
        関数remove2(){
            アラート("クリアメソッド")
            //最初のタイプ:
            var obj = document.getElementById('ajax_formdata_file');
            オブジェクトを選択します。
            ドキュメントの選択をクリアします。
        }
        (関数 ($) {
            $.fn.serializeJson = 関数（）{
                var serializeObj = {};
                var 配列 = this.serializeArray();
                var str = this.serialize();
                $(配列).each(関数() {
                    if (serializeObj[this.name]) {
                        $.isArray(serializeObj[this.name]) の場合 {
                            serializeObj[this.name].push(this.value);
                        } それ以外 {
                            serializeObj[this.name] = [serializeObj[this.name], this.value];
                        }
                    } それ以外 {
                        シリアル化Obj[this.name] = this.value;
                    }
                });
                serializeObj を返します。
            };
        })(jQuery);
    </スクリプト>
</本文>
 
</html>

後部

@レストコントローラ
@RequestMapping({ "/metadata/metaTables" })
パブリッククラス MetaTablesController
{
    
 
    @PostMapping("単一ファイル")
    パブリック void シングルファイル(@RequestParam("meFile")マルチパートファイル マルチパートファイル){
        システム出力のprintln();
    }
    @PostMapping("単一ファイルパラメータ")
    パブリック void シングルファイル(@RequestParam("meFile")マルチパートファイル マルチパートファイル、@RequestParam("name")文字列 名前){
        システム出力のprintln();
    }
    @PostMapping("単一ファイルオブジェクト")
    パブリック void singleFile(@RequestParam("meFile") MultipartFile multipartFile、Test test){
        システム出力のprintln();
    }
    @PostMapping("many-file")
    パブリック void manyFile(@RequestParam("meFile")MultipartFile[] multipartFile){
        システム出力のprintln();
    }
    @PostMapping("dir")
    パブリック void dir(@RequestParam("meFile")MultipartFile[] multipartFile){
        システム出力のprintln();
    }
    @PostMapping("ajax-formdata")
    パブリック void ajaxFormData(@RequestParam("meFile")MultipartFile multipartFile、テスト test){
        システム出力のprintln();
    }
    // 受信オブジェクトは @RequestPart を使用して json 文字列を渡し、その他のオブジェクトは @RequestParam を使用します。
    @PostMapping("ajax-formdata1")
    パブリック void ajaxFormData1(@RequestParam("meFile")MultipartFile multipartFile、@RequestPart("test") Test test、@RequestParam("num")int num){
        システム出力のprintln();
    }
    @PostMapping("ajax-formdata2")
    public void ajaxFormData2(@RequestParam("meFile")MultipartFile[] multipartFile,@RequestPart("test") テスト test){
        システム出力のprintln();
    }
    @PostMapping("ajax-formdata3")
    パブリック void ajaxFormData3(@RequestParam("meFile")MultipartFile[] multipartFile、@RequestParam("num")int num){
        システム出力のprintln();
    }
 
}

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: