Question

我试图找出如何在单击input类型文件时，当文件浏览窗口打开时，仅允许用户选择某些文件。我无法想出一个解决方案。有任何想法吗？我认为accept属性可以正常工作，但我没有太多运气，下面是否正确实现了？

<input id="file_zip" type="file" name="file_zip" accept="zip" />

如果没有上述内容，我已经想出了一个改变文件名的方法，所以我可以对它进行检查，但只有当某些内容发生变化时才会触发此事件。用户可以轻松选择相同的文件并继续，而无需再次触发该事件！我可以使用什么事件？

任何帮助都会很棒！

    $('#file_zip').change(function() {

            alert($('#file_zip').val());

    });

Answer 1

您可以在提交之前检查文件扩展名，这里是一些示例代码

   $("#DocumentUploadForm").submit(function(data) {

        //File-Extension Check - does _NOT_ replace a server-side validation
        var filename = $("#FileToUpload").val()
        if (filename.length == 0) { return false };

        var dot = filename.lastIndexOf(".");
        if (dot == -1) { return false };


        var extension = filename.substr(dot, filename.length).toLowerCase();
        var extensionWhitelist = new Array(".doc", ".docx", ".xls", ".xlsx",
                                            ".pdf", ".odt", ".jpg", ".gif", ".png",
                                            ".tif", ".tiff", ".jpeg");

        if ($.inArray(extension, extensionWhitelist) == -1) {
            alert("The file extension " + extension + " is not allowed.");
            return false
        };


    });

但您仍然需要执行服务器端检查，这也是您可以检查文件的实际类型的唯一地方。

Answer 2

@ marc.d显示了一种很好的方法，可以将支票放入submit事件中，该事件将起作用，不会让任何不受欢迎的延期通过。

如果您想要更高级的功能，例如过滤某些文件类型的“选择文件...”，您可以使用高级文件上传控件，如基于Flash的SWFUpload。但是，基于Flash的上传工作方式与表单元素略有不同，您必须看看它是否适合您。

限制允许的文件类型或获取所选文件的文件名

2 个答案: