使用一個輸入元素上傳多個文件（不是多次選擇，而是一次一個）

我有一個窗體的模型，其中有一個用戶用來選擇本地圖像上傳的文件輸入元素。這個想法是，用戶只能使用一個文件輸入元素上傳最多四個圖像，但一次不能選擇多個。在提交表單時，所選圖像會發送到服務器。使用HTML5 + javascript這個想法是否可行？使用一個輸入元素上傳多個文件（不是多次選擇，而是一次一個）

來源

2011-12-21 tamakisquare

如果你想知道它是否可行，那麼是的。您可以使用單個文件輸入元素並使用它來允許用戶選擇最多4個圖像，但將值分配給3個隱藏的輸入元素。提交時，所有文件輸入元素（隱藏和可見）將其數據發佈到服務器。

編輯：這裏的設置和文件類型的輸入控制得到的文件路徑的HTML + jQuery的例子：

<html> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $('#btnImpersonator').bind('click', function(){ 
       $('#uploader').click(); 
      }); 


      $('#uploader').bind('change', function(){ 
       $('#txtImpersonator').val($('#uploader').val()); 
       alert($('#uploader').val()); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form action=""> 
     <input type="file" id="uploader" style="display:none"> 
     <input type="text" id="txtImpersonator" />&nbsp;<input type="button" id="btnImpersonator" value="Browse" /> 
    </form> 
</body> 
</html>

來源

2011-12-21 19:03:17 Abbas

我以爲文件輸入元素不能以編程方式分配的值，不是嗎？ – tamakisquare 2011-12-21 19:10:36

你是對的，它不能這樣做。然而，我一直在絞盡腦汁，試圖記住我很久很久以前做了這件事。以下是我所做的：創建並隱藏文件控件，使用按鈕和文本框來模擬文件輸入類型，使用按鈕的onclick事件處理程序欺騙文件輸入類型的單擊事件。這一切都非常複雜，但它的工作。我會盡力讓它重新工作並更新我的答案。 – Abbas 2011-12-21 20:07:05

這個問題沒有要求，但我只提到，這不適用於一次選擇多個文件 – Mark 2012-12-02 02:07:36

使用一個輸入元素上傳多個文件（不是多次選擇，而是一次一個）

回答

相關問題