0

私はいくつかのファイル アップローダ パッケージ (生の php) を動的にロードされる形式で実装しようとしましたが、ページ上にそれらの数が不明な可能性があります。私は、フラッシュベースからその間のすべてのものまで、すべての人気のあるものをほとんど見てきましたが、同じ問題を抱えています.

私は現在、これで作業しようとしています。

^=inを使用しgetelementbyidたり"\\S*"、関連する div id が JavaScript で使用されるようにするために、読んだトリックを試しましたが、成功しませんでした。また、各 div にクラス名を追加して、getelementbyclass を使用しようとしましたが、成功しませんでした。私は解決策を探しましたが、私はそれを得ていません。

私のやり方が間違っているか、完全に道に迷っているかのどちらかです...私は実際には両方です!

しばらくの間解決策を見つけようとしてきたので、誰かが私を悲惨な状況から解放したり、正しい方向に導いてくれたりすることができれば、本当に感謝しています.

HTML 部分は次のように表示されます。

<p id="upload" class="hidden"><label>Drag & drop not supported, but you can still upload via this input field:<br><input type="file"></label></p>
  <p id="filereader">File API & FileReader API not supported</p>
  <p id="formdata">XHR2's FormData is not supported</p>
  <p id="progress">XHR2's upload progress isn't supported</p>
  <p>Upload progress: <progress id="uploadprogress" min="0" max="100" value="0">0</progress></p>
  <p>Drag an image from your desktop on to the drop zone above to see the browser both render the preview, but also upload automatically to this server.</p>

$inc はループ内の php 変数、たとえば id="filereader$inc

問題は、そうでなければ変更されるまで、javascriptが事前定義された、またはアップローダの1つのインスタンスのみを処理する場所であると私は信じています

例: filereader: document.getElementById('filereader')

4

2 に答える 2

0

それが正しいと理解できれば、ページのさまざまな部分でドラッグ アンド ドロップ フィールドを使用したいと考えています。

簡単な答えは、この機能を持つ必要があるすべての div にイベントを追加する必要があるということです。アップロードは自動的に行われるため、必要なファイル入力フィールドは 1 つだけです

ドロップゾーンのみをコピーする必要があり（ただし、必要に応じてさらにドロップゾーンを追加する必要があります）、それらのイベントを調整する必要があります

Ps .: html 部分はブログと同じままです (さらに、id holder [および 2 番目のドロップゾーンの holder2] を持つ div は省略されているようです)

例：

// tested on Chrome 26+
....
if (tests.dnd) { 
  holder.ondragover = function () { this.className = 'hover'; return false; };
  holder.ondragend = function () { this.className = ''; return false; };
  holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();
  readfiles(e.dataTransfer.files);
  }
  //.... other drop spots example need the same events ....
  holder2.ondragover = function () { this.className = 'hover'; return false; };
  holder2.ondragend = function () { this.className = ''; return false; };
  holder2.ondrop = function (e) {
      this.className = '';
      e.preventDefault();
      readfiles(e.dataTransfer.files);
  }
} else {
 ...
}
...

これは機能しますが、jQuery などを使用してより良いものにすることができます。

私はそれが役立つことを願っています

編集: ファイルを別のサーバー側スクリプトに送信する場合は、onDrop イベントで関数readfilesを「変更」する必要があります。

例（可能な解決策、あまりきれいではありません）：

// tested on Chrome 26+
 ....
 holder.ondrop = function (e) {
  this.className = '';
  e.preventDefault();
  readfiles(e.dataTransfer.files, "script_1.php");
  }
 ...
 function readfiles(files, posturl) {
 ...
   // now post a new XHR request
  if (tests.formdata) {
    var xhr = new XMLHttpRequest();
    xhr.open('POST', posturl);
    ...
  }
  ...

または、同じファイルに投稿することもできますが、フラグを使用してサーバー上でファイルの送信元を特定します。

Ps: ご存じかもしれませんが、それでも、この Codesnipplets とブログの 1 つは、運用環境で使用するためにクリーンアップする必要があります。

ではごきげんよう

于 2013-04-07T10:34:09.563 に答える
0

その Javascript コードは、getElementById1 つの要素 (見つかった最初の一致) のみを返すメソッドを使用するため、複数のインスタンスでは機能しません。

また、JS コードは、IE9 以下ではサポートされていないファイル API に依存しているため、多くのユーザー (約半分と思われます) にとって機能しないことにも言及する価値があります。

そのコードを複数のインスタンスで機能させるには、要素 ID に依存しないようにコードをリファクタリングするか、サーバー側コードで一意の要素 ID を持つ複数のコピーを生成する必要があります。forPHP では、次のようなorforeachループを使用する必要があります。

<?php

for (i=0; $i<$something; i++) {
  echo <<<EOB
  var holder = document.getElementById('holder$i'),
    tests = {
    filereader: typeof FileReader != 'undefined',   
    dnd: 'draggable' in document.createElement('span'),
    formdata: !!window.FormData,
    progress: "upload" in new XMLHttpRequest
    }, 
    support = {
    filereader: document.getElementById('filereader$i'),
    formdata: document.getElementById('formdata$i'),
    progress: document.getElementById('progress$i')
    },
// snipped for space
EOB;
}

どちらの方法もお勧めしません。主な理由は、多数のユーザーに対してはまだまったく機能しないからです。代わりに、別のアップロード ライブラリを使用することをお勧めします。

私も同様に JS ファイル アップロード ライブラリに不満を持っていたので、IE7+ (理論的には IE6 ですが、テストはしていません)、プログレス バー (IE9 以下を処理するためのフォールバック オプション付き) をサポートし、複数のインスタンスを許可するライブラリを作成しました。

ただし、ドラッグ アンド ドロップによるアップロードはサポートしていないため、それが必要な場合は、ニーズに合わないでしょう。その価値については、ここにあります（ライブデモへのリンクは上部にあります）：

https://github.com/LPology/Simple-Ajax-Uploader

于 2013-04-07T11:10:42.303 に答える