2010-06-30 22:58:55

License: MIT License

Fork: 2

Fav: 0

View: 2945

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 111 lines
HTML 6 lines
CSS 23 lines

Firefox以外は動かないっぽい。

ファイル読み込み：ブラウザ外からドラッグアンドドロップ

// forked from h6k's "ブラウザ外からドラッグアンドドロップ" http://jsdo.it/h6k/draganddrop
// Firefox以外は動かないっぽい。
// Ver 3.6.3にて動作確認。

var _sw = 400;
var _sh = 400;
var _idx;
var _field = document.getElementById("field");
var _pop = document.getElementById("pop");
var file_select = document.getElementById('file_select');

_field.style.width = _sw + "px";
_field.style.height = _sh + "px";
_pop.style.width = _sw + "px";
_pop.style.height = _sh + "px";

// ファイル選択
//file_select.addEventListener('change', function() {
//    update(file_select.files);
//}, false);

// 範囲内
function onDragOver(e) {
  e.preventDefault();
  _field.style.border = "10px solid #CCC";
}

// 範囲外
function onDragLeave(e) {
  e.preventDefault();
  _field.style.border = "10px solid #000";
}

// ファイル選択（実験コード:動きません）
function onFileSelect(e) {
  e.preventDefault();
  _field.innerHTML = "";
  _idx = 0;
  
  var reader, element;
  for(var i = 0; i < e.dataTransfer.files.length; i++) {
    if(e.dataTransfer.files[i].type.match(/image/)) {
      reader = new FileReader();
      reader.onload = function(event) {
        element = document.createElement("a");
        element.setAttribute("href", "javascript: void(0);");
        element.setAttribute("onclick", "return openPop('" + event.target.result + "', " + _idx + ");");
        element.innerHTML = '<img src="' + event.target.result + '" class="image" id="image' + _idx + '" />';
        _field.appendChild(element);
        _idx++;
      };
      reader.readAsDataURL(e.dataTransfer.files[i]);
    }
  }
}

// ドロップ
function onDrop(e) {
  e.preventDefault();
  _field.innerHTML = "";
  _idx = 0;
  
  var reader, element;
  for(var i = 0; i < e.dataTransfer.files.length; i++) {
    if(e.dataTransfer.files[i].type.match(/image/)) {
      reader = new FileReader();
      reader.onload = function(event) {
        element = document.createElement("a");
        element.setAttribute("href", "javascript: void(0);");
        element.setAttribute("onclick", "return openPop('" + event.target.result + "', " + _idx + ");");
        element.innerHTML = '<img src="' + event.target.result + '" class="image" id="image' + _idx + '" />';
        _field.appendChild(element);
        _idx++;
      };
      reader.readAsDataURL(e.dataTransfer.files[i]);
    }
  }
}

// ポップアップ表示
function openPop(file, i) {
  var w = document.getElementById("image" + i).naturalWidth;
  var h = document.getElementById("image" + i).naturalHeight;
  var iw, ih, mt, ml;
  if(w > h) {
    iw = _sw;
    ih = _sh * h / w;
    mt = (_sh - ih) / 2;
    ml = 0;
  } else {
    iw = _sw * w / h;
    ih = _sh;
    mt = 0;
    ml = (_sw - iw) / 2;
  }
  var style = "width: " + iw + "px; height: " + ih + "px; margin-top: " + mt + "px; margin-left: " + ml + "px;";
  _pop.innerHTML = '<img src="' + file + '" style="' + style + '" />';
  _pop.style.display = "block";
  return false;
}

// ポップアップ消去
function closePop() {
  _pop.style.display = "none";
}

ファイル読み込み：ブラウザ外からドラッグアンドドロップ

Firefox以外は動かないっぽい。// forked from h6k's "ブラウザ外からドラッグアンドドロップ" http://jsdo.it/h6k/draganddrop // Firefox以外は動かないっぽい。 // Ver 3.6.3にて動作確認。 var _sw = 400; var _sh = 400; var _idx; var _field = document.getElementById("field"); var _pop = document.getElementById("pop"); var file_select = document.getElementById('file_select'); _field.style.width = _sw + "px"; _field.style.height = _sh + "px"; _pop.style.width = _sw + "px"; _pop.style.height = _sh + "px"; // ファイル選択 //file_select.addEventListener('change', function() { // update(file_select.files); //}, false); // 範囲内 function onDragOver(e) { e.preventDefault(); _field.style.border = "10px solid #CCC"; } // 範囲外 function onDragLeave(e) { e.preventDefault(); _field.style.border = "10px solid #000"; } // ファイル選択（実験コード:動きません） function onFileSelect(e) { e.preventDefault(); _field.innerHTML = ""; _idx = 0; var reader, element; for(var i = 0; i < e.dataTransfer.files.length; i++) { if(e.dataTransfer.files[i].type.match(/image/)) { reader = new FileReader(); reader.onload = function(event) { element = document.createElement("a"); element.setAttribute("href", "javascript: void(0);"); element.setAttribute("onclick", "return openPop('" + event.target.result + "', " + _idx + ");"); element.innerHTML = '<img src="' + event.target.result + '" class="image" id="image' + _idx + '" />'; _field.appendChild(element); _idx++; }; reader.readAsDataURL(e.dataTransfer.files[i]); } } } // ドロップ function onDrop(e) { e.preventDefault(); _field.innerHTML = ""; _idx = 0; var reader, element; for(var i = 0; i < e.dataTransfer.files.length; i++) { if(e.dataTransfer.files[i].type.match(/image/)) { reader = new FileReader(); reader.onload = function(event) { element = document.createElement("a"); element.setAttribute("href", "javascript: void(0);"); element.setAttribute("onclick", "return openPop('" + event.target.result + "', " + _idx + ");"); element.innerHTML = '<img src="' + event.target.result + '" class="image" id="image' + _idx + '" />'; _field.appendChild(element); _idx++; }; reader.readAsDataURL(e.dataTransfer.files[i]); } } } // ポップアップ表示 function openPop(file, i) { var w = document.getElementById("image" + i).naturalWidth; var h = document.getElementById("image" + i).naturalHeight; var iw, ih, mt, ml; if(w > h) { iw = _sw; ih = _sh * h / w; mt = (_sh - ih) / 2; ml = 0; } else { iw = _sw * w / h; ih = _sh; mt = 0; ml = (_sw - iw) / 2; } var style = "width: " + iw + "px; height: " + ih + "px; margin-top: " + mt + "px; margin-left: " + ml + "px;"; _pop.innerHTML = '<img src="' + file + '" style="' + style + '" />'; _pop.style.display = "block"; return false; } // ポップアップ消去 function closePop() { _pop.style.display = "none"; } <div id="field" ondragover="onDragOver(event);" ondragleave="onDragLeave(event);" ondrop="onDrop(event);">ここに画像をドロップ</div> <div id="pop" onclick="closePop();"></div> <input id="file_select" type="file" multiple="multiple" onchange="onFileSelect(event);" /> <div id="result_container"></div> body { background-color: #DDDDDD; margin: 0px; } #field { overflow: auto; background-color: #000; border: 10px solid #000; color: #FFF; } .image { width: 50px; height: 50px; border: 0px; } #pop { display: none; position: absolute; top: 10px; left: 10px; background-color: #000; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/9cId/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/johnconner/9cId" title="ファイル読み込み：ブラウザ外からドラッグアンドドロップ">ファイル読み込み：ブラウザ外からドラッグアンドドロップ - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code