2013-01-07 116 views
2

我正在使用input type ='file'多個元素,但是對服務器端的限制我一次只能上傳一個文檔。所以我很努力地找到一種方法來做到這一點,同時只保留單個文件輸入元素......我認爲我唯一的選擇是用他們自己的隱藏文件輸入元素創建多個表單,並且當我以某種方式循環遍歷文件時設置隱藏的輸入字段的值,但我不知道如何。任何建議?以下是我迄今爲止:如何一次上傳多個文件?

HTML: 
<form method='POST' id='frmUploadDoc' enctype='multipart/form-data' target='hiddenIframe' action='/wle/rest'> 
    <input type="file" name="data" multiple="multiple" id="filesInput"> 
    <input type="submit" value="Submit"/> 
</form> 
<iframe name="hiddenIframe" id="hiddenIframe" style="display: none;"> 

JAVASCRIPT: 
function handleFileSelect(evt) {  
    var files = evt.target.files; // FileList is a FileList of File objects. 
    var output = []; 
    var actionText; 
    for (var iCount = 0, f; f = files[iCount]; iCount++) { 
     actionText="/wle/rest?action=addDocument&name=" + iCount //This creates the unique action URL for each individual form 
     $("#frmUploadDoc").attr("action", actionText); 
     output.push("<li><strong>", f.name, "</strong></li>"); 
     postDocumentToWLE(iCount);    
    } 
    document.getElementById('listDocs').innerHTML = '<ul>' + output.join('') + '</ul>'; 
    } 
+0

'「但做到服務器端的限制我只能一次上傳一個文件」 - 根據這些限制是什麼,重新實施,客戶端代碼可以爲您做的不多。你想在單個POST中上傳多個文件,還是通過AJAX將它們異步上傳到多個POST? – David

+0

該應用程序具有REST API,因此我們可以使用隱藏的iframe方法使用POST請求,如http://www.jainaewen.com/files/javascript/jquery/iframe-post-form.html所述。截至目前,我已經設置提交一個表單,但我想知道是否有一種方法可以簡單地從輸入中解析所選文件,並且每個文件只需使用自己的文件輸入創建一個新表單。爲了這個工作,我需要能夠分配一個文件到新的文件元素,但我不知道我該怎麼做。 – silvster27

+0

如果我甚至可以重複提交一遍又一遍,每次只刪除其他文件...這也可以。 – silvster27

回答

0

經過大量的研究,它似乎大衛是正確的,通過一個POST形式上傳通過iframe也無法上傳多個文件。 HTML5允許多文件上傳,但如果您需要單獨發送每個文件,則不可能使用多文件輸入。

0

未經測試,但取決於您對瀏覽器支持的要求,您應該可以使用FormData來完成此操作。

你可以通過閱讀這些文件屬性來訪問與多個屬性的輸入字段中選擇所有文件:

var files = document.getElementById('input').files; 

然後你就可以遍歷文件,創建一個FORMDATA對象爲每一個和火源的AJAX請求,當時一個。 有關代碼示例的更詳細的解釋:https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

請記住,並非所有瀏覽器都支持FormData對象。但是,再次,所有的瀏覽器不支持多屬性...