2011-09-13 00:38:02

License: MIT License

Fork: 2

Fav: 2

View: 1895

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 85 lines
HTML 14 lines
CSS 44 lines

PNG画像をドロップするとファイル名とファイルサイズが結果に表示されます。

@author Tetsuwo OISHI
@twitter http://twitter.com/_tetsuwo
@facebook http://fb.me/tetsuwo
@blog http://j.mp/tetsuwo

Drag and Drop API / File API
jQuery v1.4.2

/**
 *  Author  : tetsuwo.oishi
 *  Twitter : @_tetsuwo
 *  Blog    : http://tetsuwo.tumblr.com/
 */

var d = document;

function setFileDropEvent()
{
  d.documentElement.addEventListener('drop', function(e){
    e.preventDefault();
    updateFileDrop(e.dataTransfer.files);
  }, false);

d.documentElement.addEventListener('dragover', function(e){
    e.preventDefault();
  }, false);

var dz = d.getElementById('dropZone');

dz.addEventListener('change', function(){
    updateFileDrop(dz.files);
  }, false);
}

function updateFileDrop(files)
{
  var f = null;
  var error = 0;

for (var i = 0, l = files.length; i < l; i++)
  {
    f = files[i];

if (f.type === 'image/png')
    {
      if (f.name.match(/\.png$/))
      {
        $('#result').append('<dt>' + f.name.replace(/\.png$/, '') + '</dt>');
        $('#result').append('<dd>(<b>' + f.size + '</b> bytes)</dd>');
      }
    }
    else
    {
      error++;
    }
  }

if (error > 0)
  {
    alert('pngファイルしかアップロードできません。');
    return false;
  }

if (files.length !== error)
  {
    $('#uploadForm').slideDown();
    return true;
  }
}

function convertHTML(file)
{
  var r = d.createElement('div');
  r.setAttribute('class', 'result');

var info = d.createElement('div');
  var name = d.createElement('b');
  name.appendChild(document.createTextNode(file.realname));
  info.appendChild(name);
  var text = ' (' + file.size + ' bytes)';
  info.appendChild(document.createTextNode(text));
  r.appendChild(info);

return r;
}

$(document).ready(function(){
  $('#uploadForm').hide();
  setFileDropEvent();
});

Drag and Drop API / File API
fixed-html5.css
circle button (css only)
Animation test with circle button (CSS only)
reset-html5.css

PNG画像をドロップするとファイル名とファイルサイズが結果に表示されます。 @author Tetsuwo OISHI @twitter http://twitter.com/_tetsuwo @facebook http://fb.me/tetsuwo @blog http://j.mp/tetsuwo/** * Author : tetsuwo.oishi * Twitter : @_tetsuwo * Blog : http://tetsuwo.tumblr.com/ */ var d = document; function setFileDropEvent() { d.documentElement.addEventListener('drop', function(e){ e.preventDefault(); updateFileDrop(e.dataTransfer.files); }, false); d.documentElement.addEventListener('dragover', function(e){ e.preventDefault(); }, false); var dz = d.getElementById('dropZone'); dz.addEventListener('change', function(){ updateFileDrop(dz.files); }, false); } function updateFileDrop(files) { var f = null; var error = 0; for (var i = 0, l = files.length; i < l; i++) { f = files[i]; if (f.type === 'image/png') { if (f.name.match(/\.png$/)) { $('#result').append('<dt>' + f.name.replace(/\.png$/, '') + '</dt>'); $('#result').append('<dd>(<b>' + f.size + '</b> bytes)</dd>'); } } else { error++; } } if (error > 0) { alert('pngファイルしかアップロードできません。'); return false; } if (files.length !== error) { $('#uploadForm').slideDown(); return true; } } function convertHTML(file) { var r = d.createElement('div'); r.setAttribute('class', 'result'); var info = d.createElement('div'); var name = d.createElement('b'); name.appendChild(document.createTextNode(file.realname)); info.appendChild(name); var text = ' (' + file.size + ' bytes)'; info.appendChild(document.createTextNode(text)); r.appendChild(info); return r; } $(document).ready(function(){ $('#uploadForm').hide(); setFileDropEvent(); });<div id="dropZone" class="mb msg r8a"> ここにPNG画像をドロップしてください。 <small class="block" style="font-size:13px;">※別にピンクの外でも大丈夫ですがｗ</small> </div> Result: <dl id="result" class="mb msg r8a clearfix"> <dt>File Name</dt> <dd>File Size(bytes)</dd> </dl> <form id="uploadForm" class="mt"> <a href="javascript:void(0);" class="circleButton">Upload!</a> </form>/** * Author : tetsuwo.oishi * Twitter : @_tetsuwo * Blog : http://tetsuwo.tumblr.com/ */ #dropZone { padding:2em; text-align:center; font-size:20px; } #result { font-size:90%; margin-bottom:1em; line-height:1.3; padding:5px; border:1px solid #fc6; background-color:#ffc; } #result dt { width:14em; margin-bottom:0.2em; float:left; text-align:left; font-weight:bold; } #result dd { border-left:2px solid #fc6; padding-left:10px; margin-left:15em; margin-bottom:0.2em; } #uploadForm { display:none; } #uploadForm a { margin:0 auto; }

Play on jsdo.it games
- Author
- Share
- ブログに埋め込む
- QR
- Tag
Download

Complete!

Description What kind of game?

Control Device

	Smartphone Controllerjsdo.it WebSocket Controller»
	Mouse
	Keyboard
	Touch Device

Fullscreen

Activated
Inactivated

jsdo.it games から削除する Submit

tetsuwo

URL
http://tetsuwo.tumblr.com

Tetsuwo OISHI - 1984/09/14

LAMP, JS, Ajax, Canvas, HTML5, CSS3, Adobe AIR, Ruby, Android, Chrome拡張機能など。

PHP Framework は symfony1.4.x, Symfony2 を使って頑張ってます。

JS アニメーション不得意です。最初は単調なものしか作れないかもです。

Facebook: http://www.facebook.com/tetsuwo
Twitter: http://twitter.com/tetsukamp
Bitbucket: https://bitbucket.org/tetsuwo
GitHub: https://github.com/tetsuwo

Size

Width: px
Height: px

code

<script type="text/javascript" src="http://jsdo.it/blogparts/261Z/js"></script>

QR Code

Discussion

Questions on this code?

Favorite by

yurikokurata

ghiden:

File DragAndDrop

Forked

sort by

forked: Drag and Drop API / Fi

yurikokurata

86/14/44
- FileAPI
- api
- bytes
- css3
- drag
- drop
- file
- html5
- mimeType
- png

Drag and Drop API / File API

Description What kind of game?

Control Device

Fullscreen

Author

Default Panel

Size

code

Tweet

Twitter

Discussion

Tags

Favorite by

Forked