使用一个输入元素上传多个文件（不是多次选择，而是一次一个）

我有一个窗体的模型，其中有一个用户用来选择本地图像上传的文件输入元素。这个想法是，用户只能使用一个文件输入元素上传最多四个图像，但一次不能选择多个。在提交表单时，所选图像会发送到服务器。使用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

使用一个输入元素上传多个文件（不是多次选择，而是一次一个）

回答

相关问题