ファイルアップ、ドラックアンドドロップ　メモ

#個人的なメモ
ドラックアンドドロップ
ファイル名、ファイルサイズ、ファイル種類の取得
取得した要素の表示
保持しているファイル、各情報を削除

```javascript
/*---------- ファイルアップロードの処理 ----------*/
$(window).on('load', function() {
  //ドロップエリアを格納
  var fileArea = document.getElementById('upload_area');
  var fileInput = document.getElementById('files');
  var file_name = document.getElementById("file_name");
  var file_size = document.getElementById("file_size");

  //要素にドラッグしているときの処理
  fileArea.addEventListener('dragover', function(evt) {
    evt.preventDefault();
    fileArea.classList.add('dragover');
  });
  //ドロップエリアからドラッグ外れた時
  fileArea.addEventListener('dragleave', function(evt) {
    evt.preventDefault();
    fileArea.classList.remove('dragover');
  });
  //ドロップエリアにドロップされた時
  fileArea.addEventListener('drop', function(evt) {
    evt.preventDefault();
    fileArea.classList.remove('dragenter');
    //ドラックされたファイルの情報を取得
    var files = evt.dataTransfer.files;
    //ファイルを取得する要素を非表示
    $("#upload_area").css('display', 'none');
    //取得したファイルの情報を表示
    $("#Download").css('display', 'block');

    //ファイル情報を格納
    // var filesType = files[0].type;
    var filesType = files[0].type;
    var filesName = files[0].name;
    var filesSize = files[0].size;
    //MBで割るための値
    var mega = 1048576;
    //MBで割
    var megaFilesSize = filesSize / mega ;
    //小数点第3位以下切り捨て
    var megaFilesSize_02 = Math.floor(megaFilesSize * 100) / 100;

    //各要素の情報を書き換える
    $("#file_name").text(filesName);
    $("#file_size").text(megaFilesSize_02);

    //アップされたファイルの判定
    var type = filesType.split('/');
    if (type[1].indexOf('pdf') != -1) {
      $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').addClass('type_pdf');
    } else if (type[1].indexOf('word') != -1 || type[1].indexOf('wordprocessingml') != -1) {
      $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').addClass('type_doc');
    } else if (type[1].indexOf('spreadsheet') != -1 || type[1].indexOf('excel') != -1){
        $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').addClass('type_xls');
    } else if (type[1].indexOf('ppt') != -1 || type[1].indexOf('presentation') != -1 || type[1].indexOf('powerpoint') != -1){
        $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').addClass('type_ppt');
    } else if (type[1].indexOf('zip') != -1){
        $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').addClass('type_zip');
    }
  });

  //ファイルクリックで選択されば場合の処理
  $("#files").on('change', function(evt) {
    fileArea.classList.remove('dragenter');
    //ドラックされたファイルの情報を取得
    var files =  $(this).prop('files');
    //ファイルを取得する要素を非表示
    $("#upload_area").css('display', 'none');
    //取得したファイルの情報を表示
    $("#Download").css('display', 'block');

    //ファイル情報を格納
    var filesType = files[0].type;
    var filesName = files[0].name;
    var filesSize = files[0].size;
    //MBで割るための値
    var mega = 1048576;
    //MBで割
    var megaFilesSize = filesSize / mega ;
    //小数点第3位以下切り捨て
    var megaFilesSize_02 = Math.floor(megaFilesSize * 100) / 100;

    //各要素の情報を書き換える
    $("#file_name").text(filesName);
    $("#file_size").text(megaFilesSize_02);

    //アップされたファイルの判定
    var type = filesType.split('/');
    if (type[1].indexOf('pdf') != -1) {
      $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').addClass('type_pdf');
    } else if (type[1].indexOf('word') != -1 || type[1].indexOf('wordprocessingml') != -1) {
      $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').addClass('type_doc');
    } else if (type[1].indexOf('spreadsheet') != -1 || type[1].indexOf('excel') != -1){
        $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').addClass('type_xls');
    } else if (type[1].indexOf('ppt') != -1 || type[1].indexOf('presentation') != -1 || type[1].indexOf('powerpoint') != -1){
        $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').addClass('type_ppt');
    } else if (type[1].indexOf('zip') != -1){
        $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').addClass('type_zip');
    }
  });


  //取得したファイル領域を削除
  var fileClose = $('#Download .dl_area .dl_area_inner li.dl_area_inner_close');
  var fileClose_02 = $('#Download_02 .dl_area .dl_area_inner li.dl_area_inner_close');
  fileClose.on('click', function() {
    $fileClose();
    $("#Download").css('display', 'none');
    $("#upload_area").css('display', 'block');

  });
  fileClose_02.on('click', function() {
    $fileClose();
  });

  function $fileClose() {
    //取得したファイルの情報を非表示
      $("#Download").css('display', 'none');
    $("#Download_02").css('display', 'none');
    //ファイルを取得する要素を表示
    $("#upload_area").css('display', 'block');
    //取得しているファイルを削除
    $('#files').val('');
    //ファイルアイコンの用のクラスを削除
    $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').removeClass('type_pdf');
    $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').removeClass('type_doc');
    $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').removeClass('type_xls');
    $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').removeClass('type_ppt');
    $('#Download .dl_area .dl_area_inner li.dl_area_inner_icn').removeClass('type_zip');
  }

  //既存ファイルがなければ#Download_02を非表示
  if ($('#Download_02').css('display') == null) {
    $('#upload_area').css('display', 'block');
  }

});
/*---------- ファイルアップロードの処理 ----------*/
```