この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:5
ページ更新者:T
更新日時:2018-06-18 03:13:55

タイトル: CSVファイルアップロード方法(Ajax)
SEOタイトル: Ajax で CSV ファイルをアップロードする方法

この記事の要点
  • Java/Spring + Ajax でCSV ファイルをアップロードする実装パターン
  • クライアント: FormData に file input を入れて $.ajax で POST
  • processData: false + contentType: false の指定が必要（jQuery が勝手にエンコードしないように）
  • サーバ: コントローラで @RequestParam("file") MultipartFile file で受け取る

 

フロントからJava(Spring Framework)でCSVファイルを受け取る事例です。

 

HTML

<form id="fileuploadform">
    <input id="file" name="file" type="file">
    <button id="upload" type="submit">アップロード</button>
</form>

 

Javascript

$("#upload").click(function() {
    var formData = new FormData(
        $('#fileuploadform').get()[0]
    );
    $.ajax({
        method: 'post',
        contentType: false,
        processData: false,
        data: formData,
        url: '/post',
    }).done(function(data) {
        ...
    });
}
);

 

JAVA

@RequestMapping(value = "/post", method = RequestMethod.POST)
    public ModelAndView post(
        HttpServletResponse response, @RequestParam("file") MultipartFile file){

        InputStream inputStream = null;
        InputStreamReader inputStreamReader = null;
        BufferedReader bufferReader = null;

        try {
            inputStream = file.getInputStream();
            inputStreamReader = new InputStreamReader(inputStream,"UTF-8");
            bufferReader = new BufferedReader(inputStreamReader);

            while ((line = bufferReader.readLine()) != null) {

                byte[] b = line.getBytes();
                line = new String(b, "UTF-8");
                String[] columns = line.split(",",-1);

                for (int i = 0; i < columns.length; i++) {
                    if(i == 0) {
                        String colA = columns[i];
                    } else if(i == 1) {
                        String colB = columns[i];
                    }
                }
            }

    ...