Más contenido relacionado
La actualidad más candente (6)
Similar a Drag anddropfilereader (20)
Drag anddropfilereader
- 3. 調査 Drag & Drop DataTransfer FileApi FileReader // XmlHttpRequest ※ブラウザはFirefoxのみ
- 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'); },
- 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))); あああ
- 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);