内容
JAVASCRIPTドラッグアンドドロップのみの機能とJQUERYのボタンクリックサンプル
Railsを勉強中ですが、JAVASCRIPTがわからなくなって整理中
画像を選択して、ブラウザ上に表示、ドラッグアンドドロップのみの機能
ドラッグアンドドロップ
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>0325画像を選択するのとドラッグアンドドロップのみ</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をクリックすると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>