JavaScript – ページ 3 – 東京発、雲に乗って

2017年5月8日

【JavaScript】クエリー文字列で同名のパラメータを自動的に配列にしてFormDataにセットする

長いタイトルですが、タイトル通りのことをやることになり、
スマートなやり方が思いつかず、結局ループを2回回す方法でやりました。

var _form_data = new FormData();
var _q = location.search.replace('?', '');
var _qs = _q.split('&');
var _param_tmp1 = {};
// 同名パラメータが2つ以上あるかどうかをカウントするループ
for(var i = 0; i < _qs.length; i++) {
  var _kv = _qs[i].split('=');
  if(_kv.length == 2) {
    if(_param_tmp1[_kv[0]]) {
      _param_tmp1[_kv[0]]++;
    }
    else {
      _param_tmp1[_kv[0]] = 1;
    }
  }
}
// カウントが2つ以上なら後ろに[]をつけるループ
for(var i = 0; i < _qs.length; i++) {
  var _kv = qs[i].split('=');
  if(_kv.length == 2) {
    if(_param_tmp1[_kv[0]] == 1) {
      _form_data.append(_kv[0], _kv[1]);
    }
    else {
      _form_data.append(_kv[0] + '[]', _kv[1]);
    }
  }
}

var _form_data = new FormData();

var _q = location.search.replace('?', '');

var _qs = _q.split('&');

var _param_tmp1 = {};

// 同名パラメータが2つ以上あるかどうかをカウントするループ

for(var i = 0; i < _qs.length; i++) {

var _kv = _qs[i].split('=');

if(_kv.length == 2) {

if(_param_tmp1[_kv[0]]) {

_param_tmp1[_kv[0]]++;

}

else {

_param_tmp1[_kv[0]] = 1;

}

// カウントが2つ以上なら後ろに[]をつけるループ

for(var i = 0; i < _qs.length; i++) {

var _kv = qs[i].split('=');

if(_kv.length == 2) {

if(_param_tmp1[_kv[0]] == 1) {

_form_data.append(_kv[0], _kv[1]);

}

else {

_form_data.append(_kv[0] + '[]', _kv[1]);

}

2017年4月19日2017年4月19日

【JavaScript】連想配列でも配列でも要素数を取得

配列の要素数はlengthで取得できますが、
連想配列の場合はlengthは使えません。
スマートではないですがfor inでループを回してカウントするのが簡単です。

連想配列でも配列でも同じように要素数が取得できる関数です。

var len = function(val) {
  if(val == undefined || val == null) {
    return 0;
  }
  if(val instanceof Array) {
    return val.length;
  }
  else if(val instanceof Object) {
    var _cnt = 0;
    for(var x in val) {
      _cnt++;
    }
    return _cnt;
  }
  else {
    return val.length;
  }
};

var len = function(val) {

if(val == undefined || val == null) {

return 0;

}

if(val instanceof Array) {

return val.length;

}

else if(val instanceof Object) {

var _cnt = 0;

for(var x in val) {

_cnt++;

}

return _cnt;

}

else {

return val.length;

}

};

文字列だったら長さが返ってきます。

2017年4月13日2017年4月13日

【JavaScript】FORMタグのないページからPOST送信する

FORMタグがない状況でJavaScriptからパラメータをPOSTで渡す関数です。

var post_submit = function(url, data) {
  // FORMがなければ作ればいいじゃない。
  var _html = '<form method="POST" action="' + url + '" id="temp_form" style="display:none;">';
  for(var x in data) {
    _html += '<input type="hidden" name="' + x + '" value="' + data[x] + '" >';
  }
  _html += '</form>';
  $("body").append(_html);

  $('#temp_form').submit();
  $('#temp_form').remove();
};

var post_submit = function(url, data) {

// FORMがなければ作ればいいじゃない。

var _html = '<form method="POST" action="' + url + '" id="temp_form" style="display:none;">';

for(var x in data) {

_html += '<input type="hidden" name="' + x + '" value="' + data[x] + '" >';

}

_html += '</form>';

$("body").append(_html);

$('#temp_form').submit();

$('#temp_form').remove();

};

引数のdataには連想配列でパラメータを渡します。

2017年4月7日2017年4月12日

【jQuery】ページのトップ（最上部）へなめらかにスクロール

最近多用している、ページトップへのアニメーションスクロール、
jQueryなら簡単に実装できます。

var pagetop_scroll = function() {
  var speed = 500; /* ミリ秒 */
  var position = $('html').offset().top;
  $('body,html').animate({scrollTop:position}, speed, 'swing');
};

var pagetop_scroll = function() {

var speed = 500; /* ミリ秒 */

var position = $('html').offset().top;

$('body,html').animate({scrollTop:position}, speed, 'swing');

};

2017年4月6日2017年4月6日

【JavaScript】ドラッグ＆ドロップで複数ファイルの一括アップロード

複数のファイルをドラッグ＆ドロップで一気にアップロードするページ、
実はけっこう簡単に作れます。Ajaxを使えばページ遷移も不要です。
（一部jQueryを使用しています）

まずはHTML側にドロップさせる場所を作ります。

<div id="upload_area">
<div id="drop_area" style="background-color:#f0f0f0;width:100%;height:200px;padding:10px;border:2px solid #808080;border-radius:5px;" ondragover="dragover(event);" ondrop="drop(event);">
この枠内にファイルをドラッグ＆ドロップしてください。
<br/>
複数のファイルを選択すれば一度にアップロードできます。
</div>
</div>

この枠内にファイルをドラッグ＆ドロップしてください。

<br/>

複数のファイルを選択すれば一度にアップロードできます。

</div>

ドラッグ時とドロップ時には関数を呼ぶようにしておきます。

次にその関数をJavaScriptで定義します。

ドラッグ中にブラウザの機能をキャンセルさせます。

var dragover = function(e) {
  e.preventDefault();
};

var dragover = function(e) {

e.preventDefault();

};

ドロップされたらファイルを取り出してアップロード関数を呼びます。

var upload_cnt = 0;
var drop = function(e) {
  // ブラウザの機能をキャンセルします
  e.preventDefault();

  // ファイルを取り出します
  var files = e.dataTransfer.files;
  upload_cnt = 0;
  file_num = files.length;

  // 1件ずつアップロード関数を呼びます
  for (var i = 0; i < files.length; i++) {
    ajax_upload(files[i]);
  }
};

var upload_cnt = 0;

var drop = function(e) {

// ブラウザの機能をキャンセルします

e.preventDefault();

// ファイルを取り出します

var files = e.dataTransfer.files;

upload_cnt = 0;

file_num = files.length;

// 1件ずつアップロード関数を呼びます

for (var i = 0; i < files.length; i++) {

ajax_upload(files[i]);

}

};

アップロード関数です。
（エラー処理などは割愛し要点だけ簡単に記述します）

var ajax_upload = function(file) {
  var form_data = new FormData();
  form_data.append('file', file);
  var func = function() {
    upload_cnt++;
    if(file_num == upload_cnt) {
      alert('アップロードが完了しました');
    }
  };
  $.ajax({
    type: 'POST',
    url: '（アップロード処理を行うサーバー側のURL）',
    data: form_data,
    success: func
  });
};

var ajax_upload = function(file) {

var form_data = new FormData();

form_data.append('file', file);

var func = function() {

upload_cnt++;

if(file_num == upload_cnt) {

alert('アップロードが完了しました');

}

};

$.ajax({

type: 'POST',

url: '（アップロード処理を行うサーバー側のURL）',

data: form_data,

success: func

});

};

対応していないブラウザのための処理をロード時に呼びましょう。

if(!window.File) {
  $('upload_area').html('対応していません');
}

if(!window.File) {

$('upload_area').html('対応していません');

}