用jQuery交換文件輸入元素

我正在構建一個用戶可以上傳圖片的網站。我不想使用像SWFUpload或Uploadify這樣的Flash插件，但我希望它們能夠一次上傳多個圖像。這將導致我使用帶有multiple=""屬性集的文件輸入。問題在於，用戶只能從計算機上的同一目錄中選擇多個圖像。用jQuery交換文件輸入元素

爲了解決這個問題，我有一個涉及Javascript的想法。我的頁面上有一個文件輸入，設置了multiple屬性，當用戶選擇一些帶有該文件輸入的文件時，我用CSS隱藏它。之後，我使用Javascript將一個新的文件輸入放置在它的位置，用戶可以使用它來從不同目錄上傳更多文件。這樣，當用戶擁有想要上傳的所有圖像時，我就會發送一個帶有多個文件輸入的表單，我可以使用PHP作爲後端處理這些輸入。

這是我的相關標記：

<div id="select_images"> 
    <input type="file" name="files[]" multiple="multiple" /> 
</div>

而且我的JavaScript（使用jQuery庫）：

$('#select_images input:first').change(function(){ 
    // User selected some images to upload, hide this file input 
    $(this).css('right', '-10000px'); 

    // Place a new file input to take its place 
    $(this).before('<input type="file" name="files[]" multiple="multiple" />'); 
});

此刻，如果我選擇一些圖片上傳，jQuery的正確隱藏當前的文件輸入並且放置一箇舊的文件。所以標記是現在這個：

<div id="select_images"> 
    <input type="file" multiple="multiple" name="files[]"> 
    <input type="file" multiple="multiple" name="files[]" style="right: -10000px;"> 
</div>

這是問題所在。如果我使用jQuery放置的新文件輸入選擇更多文件上傳，則不會發生任何事情。使用jQuery插入的新文件輸入似乎不接受該文件，因爲Firebug未顯示與輸入有關的任何文件數據。是否有某種安全措施阻止我將輸入中的文件插入到使用Javascript插入到DOM中？

謝謝！

來源

2011-08-23 John

此方法工作正常，但。每次創建新文件輸入時，都可以立即開始提交該字段。如果您在頁面上創建隱藏的iFrame，則表單可以使用iFrame作爲目標，從而立即啓動上傳過程。

同時，您可以創建一個新的表單元素，其中包含一個新的文件字段。沖洗並重復！

至於你的特別麻煩，沒有任何安全限制。您是否嚴格禁止Firebug問題，或者您是否嘗試將表單發佈到服務器？有關於javascript能夠查看文件輸入值的安全性限制，這可能會影響Firebug。

來源

2011-08-23 18:21:21

如果我在論壇正在提交的腳本上執行'print_r（）'，它會正確顯示這些文件。必須是一個Firebug問題，它沒有在DOM檢查器中顯示任何內容:) – John

儘管如此，仍然存在一個問題。我似乎無法做出超過1個文件輸入。如果我嘗試使用上面的Javascript代碼創建另一個，它不會被創建。這通過Firebug進行了確認併發布了我的表單數據。 – John

因爲您沒有在新創建的輸入上添加任何事件。看看這個：http://jsfiddle.net/b9xWM/ - 它不使用「多個」屬性，但它在其他方面做你以後的事情。 –

用jQuery交換文件輸入元素

回答

相關問題