HTML 5添付ファイルドラッグ&アップロードdrop&google.Gears実装コード

テンセント微博も近くアップロードを実現した.実は簡単です.
サーバーサポートがないため、文章の中でアップロードのプレゼンテーションをすることができなくて、インスタンスをダウンロードします
ドラッグアップロードに必要なサポート
1:dropイベントをブラウザでサポートする必要があります.(ドラッグイベントに応答してfileオブジェクトを取得);
2:XMLHttpRequestオブジェクトにはsendAsBinaryメソッド(データ送信用)があります.
以上の2つの条件は現在firefoxだけが達成できる.
chromeは第1項が基準に達し、第2項はgoogleを使用することができる.gearsでシミュレーションします.
したがって、ドラッグアップロードを実現できるブラウザにはfirefox 3がある.6+とchrome 7+です.
ドラッグアップロード1:dropイベントをバインドする方法.
2:fileオブジェクトを取得します.
3:オブジェクトの2進データを取得します.
4:シミュレーションデータはpostリクエストを送信します.
XML httprequestとgoogleのためです.Gearsには大きな違いがあります.だから私はいつもパッケージ(UpLoadFileXHR)をしました.上の2 3 4の手順は全部パッケージしました.UpLoadFileXHRをインスタンス化すればドラッグファイルのアップロードができます.ダウンロード
≪インスタンス｜Instance｜emdw≫
1:UpLoadFileXHRを参照.jsファイル

2:upLoadFileXHRバインドイベントのインスタンス 、パラメータの など( には のUpLoadFileXHRの を )

 
  
/** 
  
* var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'}); 
  
* url :        
  
* name:         name 
  
* XHR : google.gears or new XMLHttpRequest() 
  
* format :           
  
* 
  
* 
  
* Methods 
  
* .onerror function      
  
* .onloadstart function      Parameter Event   (     google.gears      ) 
  
* .onprogress function      Parameter Event   
  
* .onreadystatechange function    Parameter this.XHR 
  
*/ 
  
var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'}); 
  
upLoad.format = /jpg|gif|jpeg|png/; //        
  
//           
  
upLoad.onformaterror = function(){ 
  
alert('      ，   [jpg|gif|jpeg|png]   ！'); 
  
} 
  
//          
  
//       XMLhttprequest             
  
upLoad.onreadystatechange = function(){ 
  
if(upLoad.XHR.readyState == 4){ 
  
log(upLoad.XHR.responseText); 
  
} 
  
} 
  
//      
  
upLoad.onloadstart = function(f){ 
  
//      
  
} 
  
//          
  
upLoad.onprogress = function(e){ 
  
/* 
  
* e.loaded           
  
* e.total     
  
* Math.round((e.loaded * 100) / e.total)         
  
*/ 
  
log('      '+ Math.round((e.loaded * 100) / e.total) +'%') 
  
} 
  
 
 

3:dropのバインド

 
  
/* 
  
*       ondrop    
  
* ondragenter   ondragover      stopPrevent           
  
* ondrop    start           call  this            
  
*/ 
  
elem.ondragenter = upLoad.stopPrevent; 
  
elem.ondragover = upLoad.stopPrevent; 
  
elem.ondrop = function(e){upLoad.stopPrevent(e);upLoad.start.call(upLoad, e)}; 
  
 
 

4:ドラッグできる
UpLoadFileXHRの
new UpLoadFileXHR(Object)
var upLoadFile = new UpLoadFileXHR({url:'',name:''})
url
string
アップロードアドレス
なければならない
name
string
バックグラウンド データのname
なければならない
ツールバーの
format
RegExp
フィルタファイルの は、 えば(/jpg|pen|jpeg|gif/); しないとすべてのファイルが します
でない
debug
Boolean
デバッグを くかどうか
デフォルトfalse
オートフィルアトリビュート(Auto Fill Attributes)
XHR
object
インスタンス 、ブラウザが に するプロパティに づいて、 アップロードされているファイルで されているxhrオブジェクトが されます.

support
object
のデータ {googleGears:Boolean,fileReader:Boolean}


start
function
dropイベントにバインドする で、イベントのデフォルトeパラメータを します.これを の び しstartのオブジェクトに してください.
 
stopPrevent
function
イベントバブルとイベントのデフォルトアクションをキャンセル
return false
checkFile
function
fileプロパティ(フォーマット、サイズなど)の
return Boolean
≪イベント｜Events｜ldap≫
onerror
function
エラー
デフォルトパラメータe(エラーオブジェクト)
onformaterror
function
フォーマットが しくありません(format に づいて します)
デフォルトパラメータfile( のfileオブジェクト)
onloadstart
function
アップロード
デフォルトパラメータfile(google.gears )or e(XML httprequest )
onprogress
function
アップロードの
イベントのデフォルトパラメータ
onreadystatechange
function
アップロードステータス
イベントのデフォルトパラメータ