HTML5 ファイルのドラッグ アンド ドロップ アップロードのサンプル コード共有

html5

ファイルをドラッグ アンド ドロップしてアップロードするのは古いトピックですが、私が最初に見つけて変更したコードは、いくつかの落とし穴を踏んだ後のプロセスを記録したいだけです。 。

機能実装

以下では主にブラウザ外からブラウザ内にファイルをドラッグしてアップロードする実装を紹介します。 まず、必要な基本事項をいくつか紹介します。

Drag

Events

ドラッグ イベントには次のものが含まれます:

dragstart: ユーザーがオブジェクト
• のドラッグを開始するとトリガーされます。

dragstart：当用户开始拖动对象时触发。

• dragenter

  dragenter: マウスが押されたとき初回 ターゲット要素を通過した後にドラッグが発生するとトリガーされます。このイベントのリスナーは、この場所でドロップが許可されるか、リスナーが操作を実行しないかを示す必要があります。その場合、デフォルトではドロップは許可されません。 🎜

• dragover: マウスが要素の上を通過するとき、およびドラッグが発生すると火災が発生します。 dragover：当鼠标经过一个元素时，且有拖动发生时触发 。

• dragleave：当鼠标离开一个元素，且有拖动在发生时触发。

• drag： 当对象被拖动，每次移动鼠标时触发。

• drop：在drag操作的最后发生drop时，在元素上触发此事件。监听者应该负责检索拖动的数据，并插入drop的位置。

• dragend： 在拖动对象时放开鼠标按键时触发。

从浏览器外拖拽文件到浏览器时，必须要绑定的事件有 dragover 和 drop，其他的都可以不绑定。dragover 和drop 事件的处理函数内必须调用事件的 <a href="http://www.php.cn/wiki/1074.html" target="_blank">prev</a>entDefault() 函数，要不然浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。

 

DataTransfer对象

拖拽对象用来传递数据的媒介，通过拖拽事件的 event.dataTransfer

dragleave: マウスが要素から離れたとき、そこにありますドラッグが発生すると発生します。 🎜🎜🎜🎜ドラッグ: オブジェクトがドラッグされるたびにマウスが動かされたときに発生します。 🎜🎜🎜🎜ドロップ: の最後にドロップが発生したときドラッグ操作により、要素上でこのイベントがトリガーされます。リスナーは、ドラッグされたデータを取得し、それをドロップ位置に挿入する必要があります。 🎜🎜🎜🎜dragend: オブジェクトをドラッグしている間にマウスを放します。キーが押されたとき。 🎜🎜

ブラウザの外部からブラウザにファイルをドラッグする場合、バインドする必要があるイベントは 🎜 🎜 dragover🎜 🎜 および 🎜 🎜drop、その他はバインドされないままにすることができます。 dragover🎜 🎜anddrop🎜 イベント処理関数 はイベントの 🎜 🎜<a href="http://www.php.cn/wiki/1074.html" target="_blank">prev</a>entDefault()🎜 🎜 関数、それ以外の場合はブラウザのデフォルト処理が行われます。たとえば、テキスト タイプのファイルは直接開かれ、非テキスト ファイルの場合はダウンロード ファイル ボックスがポップアップ表示されることがあります。 🎜

🎜

データ転送オブジェクト

データを転送するためにオブジェクトをドラッグするときに使用されるメディア。ドラッグ イベントの 🎜 🎜event.dataTransfer🎜 を通じて取得されます。 。 🎜

• dataTransfer.dropEffect [ = value ]: 現在の値を返します。選択操作タイプの場合、新しい値を設定して、選択した操作を変更できます。オプションの値は次のとおりです: dataTransfer.dropEffect [ = value ]：返回当前选择的操作类型，可以设置新的值来修改已选择的操作。可选的值有： none, <a href="http://www.php.cn/wiki/1297.html" target="_blank">copy</a>, link, move 。

• dataTransfer.effectAllowed [ = value ]：返回允许的操作类型，可修改。可选的值有：none, copy, copyLink, copyMove, link, linkMove, move, all, uninitialized 。

• dataTransfer.types：返回一个DOMString，列出在dragstart事件里设置的所有格式。另外，如果有文件被拖动，那么其中一个类型的字符串将是“Files”。

• dataTransfer.clearData( [ format ] )：移除指定格式的数据。如果忽略参数则移除所有数据。

• dataTransfer.setData(format, data)：添加指定的数据。

• data = dataTransfer.getData(format)：返回指定的数据。如果没有这样的数据，则返回空字符串。

• dataTransfer.files：返回被拖拽的FileList，如果有。

• dataTransfer.setDragImage(element, x, y)：用指定的元素来更新drag反馈，替换之前指定的反馈（feedback）。

• dataTransfer.addElement(element)：添加指定元素到用于渲染drag反馈的元素列表。

在这个用例里，最重要的就是 dataTransfer.files 属性，它是用户拖拽进浏览器的文件列表，是个 FileList对象，有 length none、<a href="http:/%20/www.php.cn/wiki/1297.html" target="_blank">コピー</a>、リンク、 移動

。 🎜🎜🎜dataTransfer.effectAllowed [ = value ] : 許可された操作タイプを返します。これは変更可能です。オプションの値は次のとおりです: none、copy、copyLink、copyMove、link、linkMove、移動、すべて、初期化されていません🎜🎜。 🎜🎜🎜dataTransfer.types: DOMString を返します。 、dragstart イベントに設定されているすべての形式をリストします。また、ドラッグ中のファイルがある場合、タイプ文字列の 1 つは「ファイル」になります。 🎜🎜🎜dataTransfer.clearData( [ format ] ): 指定された形式のデータを削除します。引数を省略すると、すべてのデータが削除されます。 🎜🎜🎜dataTransfer.setData(format, data): 指定したデータを追加します。 🎜🎜🎜data = dataTransfer.getData(format): 指定されたデータを返します。そのようなデータがない場合は、空の文字列が返されます。 🎜🎜🎜dataTransfer.files: に戻りますドラッグ FileList がある場合は、それをドラッグします。 🎜🎜🎜dataTransfer.setDragImage(element, x, y): 指定された要素を使用してドラッグ フィードバックを<a href="http://www.php.cn/php/php-tp-renewal.html" target="_blank">更新</a>し、前に置き換えます。指定されたフィードバック。 🎜🎜🎜<code style="font-family: 'Courier New', Courier, monospace; font-size: 1em;white-space: pre;">dataTransfer.addElement(element)：指定された要素を、ドラッグ フィードバックのレンダリングに使用される要素のリストに追加します。 🎜

この使用例で最も重要なことは 🎜 🎜dataTransfer.files🎜 🎜属性。ユーザーがブラウザにドラッグするファイルのリストです。これは 🎜 🎜FileList オブジェクトには、 🎜length🎜 🎜 属性。添字を使用してアクセスできます。 🎜

FormData

FormData 代表一个表单，可以通过 append('fieldName', value) この関数はフォームにパラメータを追加します。パラメータには文字列だけでなく、ファイル オブジェクトやバイナリ データも追加できます。

XMLHttpRequest レベル 2

XMLHttpRequest オブジェクトの新しいバージョン。ここで言及されている XMLHttpRequest は新しいバージョンを指します。

XMLHttpRequest は、異なるドメイン名のサーバーに対して HTTP リクエストを行うことができます。これは、「クロスオリジンリソース共有」(略してCORS)と呼ばれます。

ブラウザには、ブラウザのセキュリティの基礎となる有名な同一オリジン ポリシーがあり、CORS にはサーバーの同意も必要です。

XMLHttpRequest は、ブラウザーがフォーム送信を実行するのと同じように、FormData の直接送信をサポートします。

XMLHttpRequest は、進行状況情報 (progress イベント) もサポートしています。進行状況は、アップロードの進行状況とダウンロードの進行状況に分けられます。アップロードの進行状況イベントは、XMLHttpRequest にあります。 オブジェクトをアップロードすると、ダウンロード進行状況イベントが XMLHttpRequest オブジェクト。各進捗イベントには 3 つの属性があります: progress事件），进度分为上传进度和下载进度，上传进度的事件是在XMLHttpRequest.upload 对象上，下载进度的事件是在 XMLHttpRequest 对象。每个进度事件都有三个属性：

• lengthComputable：可计算的已上传字节 数

• total：总的字节 数

• loaded：到目前为止上传的字节 数

除了进度事件，还支持下面五个事件：

• load事件：传输成功完成。

• abort事件：传输被用户取消。

• error事件：传输中出现错误。

• loadstart事件：传输开始。

• loadend

  • lengthComputable

: 計算可能なアップロードされたバイト数 li>

total: 合計バイト数🎜

loaded： これまでにアップロードされたバイト数 🎜 🎜進行状況イベントに加えて、次の 5 つのイベントもサポートされています: 🎜

• loadコード>イベント: 転送は正常に完了しました。 🎜

• 中止 イベント:転送はユーザーによってキャンセルされました。 🎜

• エラー イベント:送信中にエラーが発生しました。 🎜

• loadstart イベント:転送が始まります。 🎜

• loadend イベント:転送は完了しましたが、成功したか失敗したかは不明です。 🎜

は、 progress イベントと同じです。アップロード操作に属するイベント処理関数は XMLHttpRequest.upload オブジェクト、属性ダウンロードは progress事件一样，属于上传操作的事件处理函数绑定在XMLHttpRequest.upload对象上，属性下载的直接绑定在 XMLHttpRequest 对象。

 

具体代码

本机测试时要注意把下面代码里的路径改为自己本机的。

 

服务器端

服务器端需要写个Servlet来接收上传的表单。 /html5/FileUploadServlet

XMLHttpRequest

オブジェクト。

🎜

特定のコード

machine 以下のコード内のパスを自分のマシンに変更するように注意してください。 🎜🎜 🎜

サーバー側

書き込まれる アップロードされたフォームを受信するサーブレット。 🎜 🎜/html5/FileUploadServlet🎜🎜 servlet3 の @MultipartConfig アノテーションを使用します。非常に早く達成できます。 🎜🎜🎜

クライアントコード

<html>
<head>
<title> drag drop upload demo
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body>
       <p id= "progressBarZone">请将文件拖拽进浏览器内！ <br/></ p>
</body>

<script>
var progressBarZone = document.getElementById(&#39;progressBarZone&#39;);

function sendFile(files) {
       if (!files || files.length < 1) {
             return;
      }
      
       var percent = document.createElement(&#39;p&#39; );
      progressBarZone.appendChild(percent);

       var formData = new FormData();             // 创建一个表单对象FormData
      formData.append( &#39;submit&#39;, &#39;中文&#39; );  // 往表单对象添加文本字段
      
       var fileNames = &#39;&#39; ;
      
       for ( var i = 0; i < files.length; i++) {
             var file = files[i];    // file 对象有 name, size 属性
            
            formData.append( &#39;file[&#39; + i + &#39;]&#39; , file);       // 往FormData对象添加File对象
            
            fileNames += &#39;《&#39; + file.name + &#39;》， &#39; ;
      }
      
       var xhr = new XMLHttpRequest();
      xhr.upload.addEventListener( &#39;progress&#39;,
             function uploadProgress(evt) {
                   // evt 有三个属性：
                   // lengthComputable – 可计算的已上传字节数
                   // total – 总的字节数
                   // loaded – 到目前为止上传的字节数
                   if (evt.lengthComputable) {
    percent.innerHTML = fileNames + &#39; upload percent :&#39; + Math.round((evt.loaded / evt.total)  * 100) + &#39;%
&#39; ;
                  }
            }, false); // false表示在事件冒泡阶段处理

      xhr.upload.onload = function() {
            percent.innerHTML = fileNames + &#39;上传完成。

&#39; ;
      };

      xhr.upload.onerror = function(e) {
            percent.innerHTML = fileNames + &#39; 上传失败。

&#39; ;
      };

      xhr.open( &#39;post&#39;, &#39;http://cross.site.com:8080/html5/FileUploadServlet&#39; , true);
      xhr.send(formData);            
      // 发送表单对象。
}

document.addEventListener("dragover", function(e) {
      e.stopPropagation();
      e.preventDefault();            
      // 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。
}, false);

document.addEventListener("drop", function(e) {
      e.stopPropagation();
      e.preventDefault();            
      // 必须调用。否则浏览器会进行默认处理，比如文本类型的文件直接打开，非文本的可能弹出一个下载文件框。

      sendFile(e.dataTransfer.files);
}, false);
</script>
</html>

上記のコードがすべて同じWebサイトに展開されていれば問題ありません。しかし、私がやりたいアップロード操作は、ファイルを別の Web サイトに転送することなので、落とし穴が発生します。

以上がHTML5 ファイルのドラッグ アンド ドロップ アップロードのサンプル コード共有の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。