JAVASCRIPTドラッグアンドドロップのみの機能とJQUERYのボタンクリックサンプル

JAVASCRIPTドラッグアンドドロップのみの機能とJQUERYのボタンクリックサンプル

Railsを勉強中ですが、JAVASCRIPTがわからなくなって整理中

画像を選択して、ブラウザ上に表示、ドラッグアンドドロップのみの機能

https://developer.mozilla.org/ja/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file
を参考

ドラッグアンドドロップ
http://jsfiddle.net/ginpei/bSF9z/

ここが参考になる。

$(function(){
	//処理
});

と

$(window).on("load",function(){
	//処理
});

の違いは、読み込みデータの違いらしい。
functionはHTMの読み込みが終了したタイミングで実行され、windowの方は画像やJSやCSSのすべてのデータが読み込まれてから実行されるのだそうです。

http://qiita.com/nfnoface/items/04c4e1df59c79322c82bを参考にしています。

http://naoyashiga.hatenablog.com/entry/2013/10/22/150030

<html>
<head>
<meta charset="UTF-8"/>
<title>０３２５画像を選択するのとドラッグアンドドロップのみ</title>
<style>
#dropzone {
	background-color: #cfc;
	border: solid 3px #9c9;
	color: #9c9;
	min-height: 50px;
	padding: 20px;
	text-shadow: 1px 1px 0 #fff;
}
#dropzone.dropover {
	background-color: #cff;
	color: #9cc;
}

#files:empty::before {
	color: #ccc;
	content: "(Files data will be shown here.)";
}
#files img {
	border: solid 1px #ccc;
	cursor: pointer;
	height: auto;
	margin: 0 10px;
	max-height: 128px;
	max-width: 128px;
	width: auto;
}
</style>
</head>
<body>
これはJQUERYを使用していません。inputにinchange=handleFiles(this.files)を指定しています。<br>
ちゃんとサムネイルがでるOK。画像を選択する複数対応版、ドラッグアンドドロップするとサムネイルを表示するだけです。アップロードとかDBに登録しません。JAVASCRIPTの勉強とドラッグアンドドロップの学習用です。<br>
<a href = "https://developer.mozilla.org/ja/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file" target= _blank>https://developer.mozilla.org/ja/docs/Using_files_from_web_applications#Handling_the_upload_process_for_a_file</a>
を参考<br>
<br>
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">


<a href="#" id="fileSelect">Select some files</a> 
<br><br>

ドラッグアンドドロップ<br>
<a href="http://jsfiddle.net/ginpei/bSF9z/" target=_blank>http://jsfiddle.net/ginpei/bSF9z/</a>
<br>ここが参考になる。<br>
<div id = "dropzone">ここにドラッグアンドドロップしてください
</div>


<div id="fileList">
  <p>画像の表示領域</p>
</div>

<script>
window.URL = window.URL || window.webkitURL;

var fileSelect = document.getElementById("fileSelect"),
    fileElem   = document.getElementById("fileElem"),
    fileList   = document.getElementById("fileList");
//ID=fileSelectであるリンクをクリックすると、ID=fileSelectの変数fileSelectのaddEventListenerの処理が
//実行され、hidden状態のファイル選択ボタンが隠れているのにかかわらず、fileElem.click()として
//クリックされます。そして、ファイル選択ダイアログでファイルを選択したときにonChange状態となり、function handleFiles()が実行されることになります。
//けっこう複雑な動きです。
fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);

function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>ファイルが選択されていません</p>";
  } else {
    var list = document.createElement("Ol");
    for (var i = 0; i < files.length; i++) {
      var li = document.createElement("li");
      list.appendChild(li);
      
      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.onload = function(e) {
        window.URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);
      
      var info = document.createElement("span");
      info.innerHTML = files[i].name + ": " + files[i].size + " bytes";
      li.appendChild(info);
    }
    fileList.appendChild(list);
  }


}

//ドラッグアンドドロップ　ここでドロップすると、ID=fileListに追加されます。
var dropbox;
//注意するのは変数名がdropboxでIDがdropzoneになってます。ID側を変更するときは、下のdropzoneの部分を変更します。
dropbox = document.getElementById("dropzone");
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var dt = e.dataTransfer;
  var files = dt.files;

  handleFiles(files);
}

</script>


</body>
</html>

JQUERYを使った ボタンクリックのサンプル

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8"/>
<title>0325_JQuery_Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script>
$(function(){
    $(document).on('click', '#button', function(event, p1, p2){
        console.log(arguments);
        console.log(p1);
        console.log(p2);
    });
    $(document).on('click', '#button1', function(){
        $('#button').trigger('click', [$(this).text()]);
    });
    $(document).on('click', '#button2', function(){
        $('#button').trigger('click', [$(this).text(), 'ほげほげ']);
    });
	//こんな書き方もできる　ボタンのID
	$("#button_another").click(function(){
		console.log("button_another_click")
	});
});
</script>

</head>
<body>
<a href=http://qiita.com/nfnoface/items/04c4e1df59c79322c82b target=_blank>http://qiita.com/nfnoface/items/04c4e1df59c79322c82b</a>を参考にしています。
<br>
jQueryを使用しています。<br>
ボタンを押して、コンソールのログを見るとそれぞれのボタンの出力がわかります。
<button id="button">BUTTON</button><br/><br/>
<button id="button1">ボタン1</button><br/><br/>
<button id="button2">ボタン2</button><br/><br/>
<button id="button_another">別の方法</button><br/><br/>
<br>
別のクリック方法<br>下はボタンではないけれど、クリックするとJSが動作します。<br>
なお、ブラウザでは何も変化せず、コンソールに出力されます。
参考にしたのは<br>
<a href=http://naoyashiga.hatenablog.com/entry/2013/10/22/150030 target=_blank>http://naoyashiga.hatenablog.com/entry/2013/10/22/150030</a><br>
<p id='nameless'>nameless function</p>
<p id='name'>name function</p>
<p id='test'>test</p>
<p id='bind'>bind</p>
<p id='click'>click</p>

<script>

function name(){
    console.log("name");
}

function badSample(t){
    console.log("badSample:" + t);
}

function bindSample(event){
    //bindSample:100
    console.log("bindSample:" + event.data.num);
}

function clickSample(event){
    //clickSample:100
    console.log("clickSample:" + event.data.num);
}

$("#nameless").click(function(){
  console.log("nameless");
});

$("#name").click(name);

$("#test").click(badSample(100));

$("#bind").bind("click",{num : 100},bindSample);

$("#click").click({num : 100},clickSample);
</script>

<br>
<br>
別のボタンクリックに処理のサンプル<br>
<a href=http://semooh.jp/jquery/api/events/trigger/type,+%5Bdata%5D/>http://semooh.jp/jquery/api/events/trigger/type,+%5Bdata%5D/</a>
<br>
Button#1をクリックすると数が増加します<br>
Button#2をクリックすると２つの数が増加します。<br>

<button id="button_sa1">Button #1</button>
<button id= "button_sa2">Button #2</button>
<div><span>0</span> button #1 clicks.</div>
<div><span>0</span> button #2 clicks.</div>
<script>
$("#button_sa1").click(function () {
  update($("span:first"));
});
$("#button_sa2").click(function () {
  $("#button_sa1").trigger('click');
  update($("span:last"));
});
function update(j) {
  var n = parseInt(j.text(), 0);
  j.text(n + 1);
}
</script>

<pre>
$(function(){
	//処理
});
</pre>
と
<pre>
$(window).on("load",function(){
	//処理
});
</pre>

の違いは、読み込みデータの違いらしい。<br>
functionはHTMの読み込みが終了したタイミングで実行され、windowの方は画像やJSやCSSのすべてのデータが読み込まれてから実行されるのだそうです。

</body>
</html>

こちらの記事もどうぞ