Question

我有一个表单的模型，其中有一个文件输入元素，用户可以使用它来选择要上传的本地图像。这个想法是用户可以使用一个文件输入元素上传最多四个图像，但不能一次选择多个。表单提交后，所选图像将被发送到服务器。这个想法是否可行使用HTML5 + javascript？

Answer 1

如果你想知道它是否可行，那么是的。您可以使用单个文件输入元素并使用它来允许用户选择最多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>

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

1 个答案: