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

内容

1 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(){
	//処理
});

$(function(){

//処理

});

と

$(window).on("load",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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

<html>

<head>

<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>

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

ドラッグアンドドロップ<br>

<a href="http://jsfiddle.net/ginpei/bSF9z/" target=_blank>http://jsfiddle.net/ginpei/bSF9z/</a>

<br>ここが参考になる。<br>

<div id = "dropzone">ここにドラッグアンドドロップしてください

</div>

<p>画像の表示領域</p>

</div>

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>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

<!DOCTYPE html>

<head>

<title>0325_JQuery_Example</title>

$(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/>

<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='click'>click</p>

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>

<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>

$("#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>

こちらの記事もどうぞ

2018年次回作成アプリ学習言語ネタ jquery ajax,まずはjqueryを勉強中 2018年次回作成アプリ学習言語ネタ jquery […]
Rails とDropzoneでドラッグアンドドロップとアップロードができるようにしたいが、、、できた Rails […]
今日のエラー　rails勉強中 rspec ‘require’: cannot load such file — spec_helper (LoadError)　解決せず今日のエラー　rails勉強中 rspec 'require': cannot load […]
Photoshop 解約　時期はいつか？解約料金 (契約残額の 50%) が発生します。 Photoshop 解約　時期はいつか？解約料金 (契約残額の 50%) […]
ニコニコ動画プレミアム会員退会について　期間　引き落とし　退会するなら月末、ニコニコ動画の入会時期と退会時期はいつか？ニコニコ動画では将棋の棋戦を生中継しているので暇なと […]
古いiMacを廃棄、リサイクルに出す古いiMacを廃棄、リサイクルに出すそろそろ古いiMacを廃棄しなくては部屋の場所をとって […]