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>
