文件上傳 - 多個實例

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