HTML5 添付ファイルのドラッグアンドドロップアップロードドロップ & google.gears 実装コード

HTML5 添付ファイルのドラッグアンドドロップアップロードドロップ & google.gears 実装コード_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-05-16 18:07:07

オリジナル

1376 人が閲覧しました

Tencent Weibo も最近、ドラッグアンドドロップによるアップロードを実装しました。実はとてもシンプルなのです。
サーバーのサポートがないため、この記事ではアップロードのデモを行うことができません。ダウンロード例
ドラッグアンドドロップアップロードに必要なサポート
1 : ブラウザはドロップイベントをサポートする必要があります。 (ドラッグイベントに応じてファイルオブジェクトを取得します);
2: XMLHttpRequest オブジェクトには sendAsBinary メソッドがあります (データの送信に使用されます)。
上記の 2 つの条件は、現時点では Firefox によってのみ実現されます。
Chrome の最初の項目は標準を満たしており、2 番目の項目は google.gears を使用してシミュレートできます。
つまり、ドラッグアンドドロップアップロードを実装できるブラウザには、firefox3.6 と chrome7 が含まれます。
ドラッグ＆ドロップアップロードの実装方法
1: ドロップイベントをバインドします。
2: ファイルオブジェクトを取得します。
3: オブジェクトのバイナリデータを取得します。
4: ポストリクエストを送信するためのデータをシミュレートします。

XMLhttprequest と google.gears は大きく異なります。
そのため、私は常にそれをカプセル化します (UpLoadFileXHR)。上記のステップ 2、3、4 をカプセル化しました。
UpLoadFileXHR をインスタンス化している限り、ファイルをドラッグアンドドロップしてアップロードできます。クリックしてダウンロード

例

1: UpLoadFileXHR.js ファイルを参照します

コードをコピーしますコードは次のとおりです:

< script type="text/javascript" src="UpLoadFileXHR.js">

2: upLoadFileXHR バインディングイベントのインスタンス化、パラメータの設定など詳細については、以下の UpLoadFileXHR を参照してください。はじめに)

コードをコピーコードは次のとおりです:

 
/* *
* var upLoad = new UpLoadFileXHR({url:'/cgi-bin/upload_img_fdfs', name:'Filedata'}); 
* url: アップロード データ パス
* name: バックグラウンド読み取りデータ名 
* XHR: google.gears または new XMLHttpRequest() 
* 形式: アップロード形式の正規表現
* 
* 
* メソッド 
* .onerror 関数 エラーが発生しました
* .onloadstart関数 送信開始パラメータ イベントオブジェクト（google.gearsを使用している場合はそのようなメソッドはありません） 
* .onprogress関数 送信進行状況パラメータ イベントオブジェクト 
* .onreadystatechange関数 状態パラメータ 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. >} 
//リアルタイムのアップロード進行状況を取得
upLoad.onprogress = function(e){ 
/* 
* e.loaded アップロードされたデータ サイズ
* e.total 合計サイズ
* Math.round((e.loaded * 100) / e.total) データ アップロード パーセンテージ
*/ 
log( 'アップロード済み' Math.round((e.loaded * 100) / e .total) '%') 
} 


3: バインドドロップ 


 

コードをコピー

コードは次のとおりです: /* * 必要なのは ondrop イベント* ondragenter とondragover はデフォルトのアクションをキャンセルするために stopPrevent メソッドを直接バインドします* ondrop は start メソッドをバインドします注ここでは、インスタンス化したオブジェクトを指すように call を使用する必要があります

elem.ondragenter = upLoad.stopPrevent;
elem.ondragover = upLoad.stopPrevent;
elem.ondrop = function(e ){upLoad.stopPrevent(e);upLoad.start.call(upLoad, e)};
4: ドラッグ可能

UpLoadFileXHR の使用方法

を呼び出す現在のオブジェクトにポイントしてください。

新しい UpLoadFileXHR(オブジェクト)

var upLoadFile = new UpLoadFileXHR({url:'',name:''})

URL

文字列

アップロードアドレス

必須

名前

文字列

バックグラウンドで取得したデータの名前

必須

属性

フォーマット

正規表現

(/jpg|pen|jpeg|gif/) などのファイルタイプをフィルタリングします。設定されていない場合、すべてのファイルが通過します。

必要ありません

デバッグ

ブール値

デバッグが有効かどうか

デフォルトは false

オートコンプリート属性

XHR

オブジェクト

インスタンス化後、ブラウザに従ってプロパティが自動的に入力されます。ここには、現在ファイルをアップロードするために使用される xhr オブジェクトが保存されます。

自動

サポート

オブジェクト

データの送信に現在使用されているもの

new UpLoadFileXHR(Object)
var upLoadFile = new UpLoadFileXHR({url:'',name:''})
url	string	上传地址	必须
name	string	后台取得数据的name	必须
属性
format	RegExp	过滤文件类型比如(/jpg\|pen\|jpeg\|gif/);不设置则所有文件通过	非必要
debug	Boolean	是否开启debug	默认false
自动填充属性
XHR	object	实例化以后根据浏览器自动填充的属性，这里保存了当前上传文件所使用的xhr对象	自动
support	object	当前用什么传输数据 {googleGears:Boolean, fileReader:Boolean}	自动
方法
start	function	绑定到drop事件上的方法,接收一个事件默认e参数。请把this指向你当前的调用start的对象
stopPrevent	function	取消事件冒泡和事件默认动作	return false
checkFile	function	检查file属性(格式，大小等)	return Boolean
事件
onerror	function	出错	默认参数 e(错误对象)
onformaterror	function	格式不正确(判断依据 format 属性)	默认参数 file(当前file对象)
onloadstart	function	开始上传	默认参数 file(google.gears下) or e(XMLhttprequest下)
onprogress	function	上传进度	事件默认参数
onreadystatechange	function	上传状态	事件默认参数

{googleGears:Boolean, fileReader:Boolean}