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