Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drag anddropfilereader

2,019 views

Published on

Published in: Technology
  • Login to see the comments

  • Be the first to like this

Drag anddropfilereader

  1. 1. Drag & Drop ときどき File API<br />nakajijapan<br />
  2. 2. 背景的なもの<br />html5といろいろなAPIの出現に伴い、いろいろな表現ができるようになってきた。<br /> こんな僕でも実装できた!<br />写真をドラッグアンドドロップして画像投稿できたらいいなぁという純粋な願望<br />イメージは30Days的な表現をしたかった。<br />
  3. 3. 調査<br />Drag & Drop<br />DataTransfer<br />FileApi<br />FileReader<br />// XmlHttpRequest<br />※ブラウザはFirefoxのみ<br />
  4. 4. Drag & Drop<br />
  5. 5. Drag & Drop<br />dragenter<br /> ドラッグ中のマウスカーソルが、要素と重なったときに瞬間に呼び出されるイベント<br />dragover<br />ドラッグ中のマウスカーソルが要素内から出た時に呼び出されるイベント<br />drop<br />ドラッグ時に呼び出されるイベント<br />
  6. 6. あああ<br /><javascript><br />function init() {<br />dandd= new Nakaji();<br /> <br />addEvent(window, "dragenter", dandd.dragEnter, false);<br />vardropBox = {};<br />dropBox= document.getElementById("dropbox");<br /> <br />addEvent(dropBox, "dragover", dandd.dragOver, false);<br />addEvent(dropBox, "drop", dandd.drop, true);<br />}<br /> <br />// ロード時に処理を追加<br />window.addEventListener("load", init, false);<br /> <br /> <br />
  7. 7. あああ<br /><javascript><br />Nakaji.prototype= {<br /> <br /> //-------------------------<br /> // ドラッグ中のマウスカーソルが、<br /> // 要素と重なったときに瞬間に呼び出されるイベント<br /> //-------------------------<br />dragEnter : function(event) <br /> {<br /> $("#dropbox").css('background', 'red');<br /> },<br />
  8. 8. <html><br /><div id= "dropbox"> Drop Here!!</div><br />
  9. 9. File API<br />
  10. 10. File API<br />FileReader<br />今のところFirefoxのみ<br />次のバージョンのChromeで利用可能!?<br />http://gihyo.jp/dev/column/01/browser/chrome5<br />ファイルをたくさんアップロードする処理をしようとすると重くなる?<br />
  11. 11. drop : function(event) {<br /> // ドラッグされたデータを取得<br />var files = event.dataTransfer.files;<br /> <br />・<br />・<br />・<br />var file = files[i];<br />var reader = new FileReader();<br /> reader.name = file.name,<br />reader.index = i,<br />reader.file = file;<br /> // メソッドの登録<br />reader.addEventListener("loadend", Nakaji.prototype.buildImageListItem, false);<br /> // ファイルをdataURL形式で読み取る<br />reader.readAsDataURL(file); <br /> <br />あああ<br />
  12. 12. buildImageListItem : function(event) {<br />varimgTag = $(document.createElement("img"));<br />vardivTag = $(document.createElement("div"));<br />varname = event.target.name;<br />vardata = event.target.result;<br />varfile = event.target.file;<br /> <br />imgTag.attr({<br /> width: 200,<br /> height: 200,<br />src: data<br /> });<br /> <br /> // 先頭に追加<br /> $("#bag").prepend(divTag.append(imgTag.fadeIn(2000)));<br />あああ<br />
  13. 13. 以上!<br />
  14. 14. XmlHttpRequest()<br />
  15. 15. XmlHttpRequest()<br />画像ファイルをアップロード<br />DataTransferオブジェクトを利用<br />処理中は進捗状況を表示させる<br />XmlHttpRequest.onprogress()<br />
  16. 16. あああ<br /><javascript><br /> // マルチパート形式で画像を保存する<br />multipartFormData+= '--' + boundary + 'rn';<br />multipartFormData += 'Content-Disposition: form-data; <br /> filename="' + file.name + '"rn'<br /> +'Content-Type: ' + contentType + 'rn'<br /> +'Content-Transfer-Encoding: binary' + 'rn' + 'rn'<br /> +file.getAsBinary()<br /> +'rn--' + boundary + '--';<br /> <br />
  17. 17. あああ<br /><javascript><br />//アップロード先<br />xhr.open("POST", "./upload.php");<br />// ヘッダの設定<br />xhr.setRequestHeader( "Content-type","multipart/form-data; boundary=" + boundary );<br />xhr.setRequestHeader( "Content-Length", multipartFormData.length );<br />// バイナリデータを送信<br />xhr.sendAsBinary(multipartFormData);<br />
  18. 18. まとめ<br />ほとんどクロスブラウザできてない<br />Firefoxでしか動かない。<br />jqueryがやってくれることを切に願います<br />重い<br />ブラウザのメモリリークが凄いことになる<br />free()的なものはないものか!<br />   FileReaderは重い<br />XmlHttpRequest()<br />今回なによりも画像ファイルアップロード時の処理<br />が面倒くさかった!<br />
  19. 19. 実演?<br />
  20. 20. ご性聴ありがとうございました。<br />

×