文件上传 - 多个实例

Question

我一直在试图以动态加载的格式实现一些文件上传软件包（raw 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，应该有这个功能。 因为上传自动工作，你只需要一个文件输入字段

只有dropzones必须被复制（但前提是你想要的，更多的悬浮窗）及其找齐必须调整

诗： HTML部分保持不变作为在博客（加有ID支架[和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或更好。

我希望它能帮助

编辑： 如果欧想将文件发送到不同的充服务器端的脚本，你必须在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); 
    ... 
    } 
    ... 

或者你可以发布到同一个文件，但使用一个标志，在SERV determin呃来自文件的来源。你可能知道，但这个Codesnipplets和一个形成博客的人，需要清理生产使用。

所有最好的

Answer 2

这是因为它采用了getElementById方法，它返回只有一个元素（它找到的第一个匹配）Javascript代码不能与多个实例。

值得一提的是，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; 
} 

我不建议任何行动的过程中，主要是因为它仍然不会在所有拥有大量用户的工作。相反，我建议使用不同的上传库。我曾经写过一个支持IE7 +（理论上IE6，但没有测试过），进度条（带有用于处理IE9及以下版本的后备选项），并允许多个实例的文件上传库。

但是，它不支持拖放上传，所以如果这是一项要求，它将不适合您的需求。对于它的价值，这是（链接到现场演示在顶部）：

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