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

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('対応していません');

}

2011年9月20日2017年4月12日

【ツール】生年月日を設定すると年齢が返ってくるウィジェットできたよー

年齢は当然ですが毎年増えていくもので、
ページに直接年齢を記述したりすると
やがて間違った情報になってしまいます。

毎年修正するのも面倒でしょうし
（〇〇年時点）と記述しても、数年後には分かりにくいですよね。

生年月日を使って、年齢を自動計算させましょう。

下記のように
年齢を表示したい場所にscriptタグを2つ貼り付けるだけです。

私は
<script type="text/javascript">
var birth = '1977-03-18';
</script>
<script type="text/javascript" src="//clouds.tokyo/blog/tools/birth2age.js"></script>
歳です。

私は

var birth = '1977-03-18';

</script>

歳です。

最初のscriptタグの1行目、1977-03-18の部分をあなたの生年月日に変えるだけ。
おかしな値を入れると「(ERROR)」と表示されます。

実行した結果は↓

「私は歳です。」

↑40の部分、「40」と書いているのではなく、上記のscriptタグを埋め込んでいます。

scriptタグが禁止されている人はあきらめましょう。

ブログの投稿なんかで使うと逆に不自然なので注意してください。
プロフィールページとかにどうぞ。

2011年7月8日2017年4月5日

【JavaScript】正規表現の条件式に変数を使う

JavaScriptの正規表現は、通常

aaa.match(/AAA/)

1	aaa.match(/AAA/)

で判定したり

aaa.replace(/AAA/, 'BBB')

1	aaa.replace(/AAA/, 'BBB')

で置換したりしますが、
JavaScriptでは
/で囲まれた条件式は文字列ではなく正規表現オブジェクトのため、
上記の部分に無理やり変数を差し込もうとしてもうまくいきません。

したがって、変数を使う場合は
正規表現オブジェクトを別で作成します。

var exp = new RegExp('AAA');
aaa.match(exp)

1 2	var exp = new RegExp('AAA'); aaa.match(exp)