2014-02-12 49 views
3

如果你有一個這樣的元素的HTML表單:是否可以使用JavaScript刪除輸入類型=文件選擇?

<input type="file" name="file" multiple="multiple"> 

然後通常將允許用戶選擇多個文件進行上傳,他們都被髮送到服務器使用相同的表單字段名「文件」。

據我所知,由於安全原因,瀏覽器不會讓JavaScript爲所選文件設置任何值,這是件好事。

我只是想知道,一旦用戶選擇了文件,我想有多個表單單獨執行上傳。有沒有辦法要麼:

  • 克隆所輸入的項目進入每一個新的形式,並從編程的每個元素刪除 文件選擇?
  • 將他們的部分選擇 轉換爲單獨的輸入類型=文件元素,或者甚至是不同的屏幕上的表格 ?
+0

也許這是[新的文件API](https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications)的情況? – Charles

+0

@Charles:當IE8和9死了的時候,會是這樣。 :-) http://caniuse.com/#feat=fileapi –

+0

@ T.J.Crowder,男人,在我的閱兵式上下雨。至少,它發誓它在IE9中。 – Charles

回答

2

如果您克隆了input[type=file]元素,則克隆的值爲空。您也無法將一個文件輸入的值複製到另一個文件。

我從來沒有試過移動選擇文件後從一個文件輸入到另一個文件的文件。我希望瀏覽器也能清除選擇內容,但也可能不會。 (更新:。三對瀏覽器進行測試,所有這些的保留值,出乎我的意料見下文)

從根本上說,如果你想使用不同的形式將文件分別上載,你會想以不同形式開始的輸入,之前用戶進行選擇。但顯然你可能能夠移動它們,這會讓你做你想做的事情。我仍然可能會從單獨的表格開始,以避免移動它們。


有趣的是,Chrome瀏覽器,火狐,IE10和至少看起來非常高興移動與其選擇一個文件元素完好無損,甚至到不同的文件:Live Example | Source

HTML:

<input id="theFile" type="file"> 
<br>Choose a file above, then either: 
<br><input type="button" id="btnClone" value="Clone"> 
<input type="button" id="btnMove" value="Move to iframe"> 
<br> 
<iframe id="theFrame" style="width: 99%"></iframe> 

的JavaScript:

(function() { 
    gid("btnClone").onclick = function() { 
    display("Here's the clone:"); 
    document.body.appendChild(gid("theFile").cloneNode(true)); 
    }; 
    gid("btnMove").onclick = function() { 
    gid("theFrame").contentDocument.body.appendChild(gid("theFile")); 
    display("File input moved to the iframe"); 
    }; 

    function gid(id) { 
    return document.getElementById(id); 
    } 

    function display(msg) { 
    var p = document.createElement('p'); 
    p.innerHTML = String(msg); 
    document.body.appendChild(p); 
    } 
})(); 

通過上述,如果我選擇的東西,點擊移動到的iframe按鈕,輸入移動,顯然完好。 (克隆按預期清除值。)

相關問題