MW211 EXIT

devlog
jQuery/データのインポート
2021年10月22日
以下のような感じで。

【HTML】
┌──────────────────────────────────────┐
│<form>                                                                      │
│  <input type="hidden" name="キー" value="upfile">                          │
│  <input type="file" name="upfile">                                         │
│  <input type="button" value="インポート">                                  │
│</form>                                                                     │
│<input type="text" id="file_name" readonly="readonly">                      │
└──────────────────────────────────────┘
  ※POST項目は、$.ajax()のdataではなく、form内のhiddenで定義

【jQuery(JavaScript)】
┌──────────────────────────────────────┐
│$('form :button').on('click', function() {                                  │
│    const formData = new FormData($('form').get(0));                        │
│    $.ajax({                                                                │
│            url         :URLを指定,                                         │
│            type        :'post',                                            │
│            data        :formData,                                          │
│            processData :false,            // 変換しない                    │
│            contentType :false,            // content-typeヘッダを送信しない│
│            cache       :false,            // キャッシュをクリア            │
│            dataType    :'json',                                            │
│        })                                                                  │
│        .done(function(data, status, xhr) {                                 │
│            alert('インポート成功');                                        │
│        })                                                                  │
│        .fail(function(xhr, status, error) {                                │
│            alert('エラー');                                                │
│        })                                                                  │
│        .always(function(data, status, xhr) {                               │
│            $('#file_name').val($('form :file').prop('files')[0].name);     │
│            $('form')[0].reset();                                           │
│        });                                                                 │
│    });                                                                     │
└──────────────────────────────────────┘
  ※ファイルの内容を変更してそのまま再インポートするとエラーとなるので
    インポート後に一旦クリアして回避(ファイル名の引き継ぎも)

【PHP】
┌──────────────────────────────────────┐
│$ファイル全文 = file_get_contents($_FILES[$_POST['キー']]['tmp_name']);     │
└──────────────────────────────────────┘
  ※CSVファイルやTSVファイルを全文取得して、後は配列に格納して処理
分類:jQuery