【共有】HTML 5添付ファイルドラッグ&アップロードdrop&google.gears
12802 ワード
<!--
/*各行変色表*/
table.zebra, .zebra th, .zebra td{border-width:1 px;border-style:solid;margin:0;font-family:'Microsoft Yahei',Tahoma,Arial!important;font-family:'宋体',Tahoma,Arial;)13;
table.zebra { table-layout: fixed; width: 100%; margin-bottom: 24px; padding: 0 1px 1px 0; border-spacing: 0; border-collapse: separate; *border-collapse:collapse; border-color: #abb8ce; background: #EDEDED; }
.zebra th { padding: 5px 0; font-weight: bold; border-color: #f8f8f8 #abb8ce #abb8ce #f8f8f8; text-align: center; text-shadow: 1px 1px 0 #e4edfb; vertical-align: middle; background: #d0dbee; }
.zebra td { padding:0; }
.zebra th.separate { border-color: #E1F196 #AECD1B #AECD1B #F3FAD6; background-color: #f3f7fd; }
.zebra td { padding: 4px; font: 12px/18px Consolas, "Courier New", Courier, monospace; text-align: left; vertical-align: top; }
.zebra td { border-color: #f8f8f8 #abb8ce #abb8ce #f8f8f8; background: #e0e8f5; }
.zebra tr.odd th { background: #dbe4f4; }
.zebra tr.odd td { background: #e6eef9; }
table.zebra .parameter, table.zebra .type, table.zebra .default { width:6em; }
td.red{ background:#F90}
-->
gmailの添付ファイルからドラッグ&ドロップアップ、網易メールボックスのドラッグ&ドロップアップまで、html 5が私たちに新しいweb体験をもたらしたのを見ました.
テンセント微博も近くアップロードを実現した.実は簡単です.
サーバサポートなしではアップロードプレゼンテーションができないため、インスタンスのダウンロード
本明細書のソースアドレス:ブログ園idche
ドラッグアップロードに必要なサポート
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の説明を参照)
3:dropのバインド
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
アップロードステータス
イベントのデフォルトパラメータ
/*各行変色表*/
table.zebra, .zebra th, .zebra td{border-width:1 px;border-style:solid;margin:0;font-family:'Microsoft Yahei',Tahoma,Arial!important;font-family:'宋体',Tahoma,Arial;)13;
table.zebra { table-layout: fixed; width: 100%; margin-bottom: 24px; padding: 0 1px 1px 0; border-spacing: 0; border-collapse: separate; *border-collapse:collapse; border-color: #abb8ce; background: #EDEDED; }
.zebra th { padding: 5px 0; font-weight: bold; border-color: #f8f8f8 #abb8ce #abb8ce #f8f8f8; text-align: center; text-shadow: 1px 1px 0 #e4edfb; vertical-align: middle; background: #d0dbee; }
.zebra td { padding:0; }
.zebra th.separate { border-color: #E1F196 #AECD1B #AECD1B #F3FAD6; background-color: #f3f7fd; }
.zebra td { padding: 4px; font: 12px/18px Consolas, "Courier New", Courier, monospace; text-align: left; vertical-align: top; }
.zebra td { border-color: #f8f8f8 #abb8ce #abb8ce #f8f8f8; background: #e0e8f5; }
.zebra tr.odd th { background: #dbe4f4; }
.zebra tr.odd td { background: #e6eef9; }
table.zebra .parameter, table.zebra .type, table.zebra .default { width:6em; }
td.red{ background:#F90}
-->
gmailの添付ファイルからドラッグ&ドロップアップ、網易メールボックスのドラッグ&ドロップアップまで、html 5が私たちに新しいweb体験をもたらしたのを見ました.
テンセント微博も近くアップロードを実現した.実は簡単です.
サーバサポートなしではアップロードプレゼンテーションができないため、インスタンスのダウンロード
本明細書のソースアドレス:ブログ園idche
ドラッグアップロードに必要なサポート
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ファイル
<
script type
=
"
text/javascript
"
src
=
"
UpLoadFileXHR.js
"
><
/
script>
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
アップロードステータス
イベントのデフォルトパラメータ