Question

我一直在尝试以动态加载的格式实现一些文件上传程序包（原始php），页面上可能存在未知数量的文件。我几乎看过所有流行的闪存，基于两者之间的所有东西，但有同样的问题。

我目前正在尝试使用this。

我尝试了一些技巧，比如在^=和getelementbyid中使用"\\S*"以确保javascript使用了相关的div ID，但我没有成功。我也尝试为每个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>

我打算通过PHP动态生成它，例如，$ inc是循环中的php变量，例如id =“filereader $ inc

这个问题，我相信javascript只会处理预定义或上传者的一个实例，否则会另外修改

例如：filereader：document.getElementById（'filereader'）

Answer 1

好的，如果我理解它是正确的，你想在页面的不同部分使用拖放字段。

所以简短的回答是，您必须将事件添加到应该具有此功能的每个div。因为上传自动运行，您只需要一个文件输入字段

只有必须复制掉区（但只有在你想要的情况下，更多的掉区）并且必须调整它们的平均值

Ps。：html部分保持与博客相同（加上带有id持有者的div [和第二个dropzone的holder2]，似乎已被省略）

示例：

// 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左右更好。

我希望它有所帮助

修改如果你想将文件发送到不同的服务器端脚本，则必须在te 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); ... } ...

或者您可以发布到同一个文件，但使用标志来确定文件来自服务器的位置。

P.s。：你可能知道，但是，这个Codesnipplets和博客中的那个代码需要清理才能用于生产。

一切顺利

Answer 2

Javascript代码不适用于多个实例，因为它使用的getElementById方法只返回一个元素（它找到的第一个匹配项）。

还值得一提的是，JS代码不适用于许多用户（大约一半，我相信）因为它依赖于IE9及以下版本不支持的File API。

要使该代码适用于多个实例，必须重构它以便不依赖于元素ID，或者必须使用服务器端代码生成具有唯一元素ID的多个副本。在PHP中，这将涉及使用类似于此的for或foreach循环：

<?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及以下），并允许多个实例。< / p>

但是，它不支持拖放上传，因此如果这是一项要求，则无法满足您的需求。对于它的价值，这里是（链接到顶部的现场演示）：

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

文件上传 - 多个实例

2 个答案: