如何使输入类型=文件应仅接受pdf和xls

Question 1

我用了 <input type= "file" name="Upload" >

现在，我想通过仅接受.pdf和.xls文件来限制它。

当我单击提交按钮时，应对此进行验证。

当我单击网页上的文件（PDF / XLS）时，它应该会自动打开。

有人可以为此提供一些示例吗？

Question 2

您可以通过使用属性accept并向其中添加允许的mime-types来实现。但并非所有浏览器都尊重该属性，可以通过某些代码检查器轻松删除该属性。因此，无论哪种情况，您都需要在服务器端检查文件类型（第二个问题）。

例：

<input type="file" name="upload" accept="application/pdf,application/vnd.ms-excel" />

第三个问题是“当我单击网页上的文件（PDF / XLS）时，它应该自动打开。”：

您无法实现。用户设置如何在客户端计算机上打开PDF或XLS。

Question 3

您可以使用此：

的HTML

<input name="userfile" type="file" accept="application/pdf, application/vnd.ms-excel" />

仅支持。PDF和。XLS文件

Question 4

不幸的是，在选择时并没有保证的方法。

某些浏览器支持标签的accept属性input。这是一个好的开始，但不能完全依靠。

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

您可以使用cfinput并运行验证来检查提交时的文件扩展名，但不能检查mime类型。这是更好的方法，但仍然不够安全。OSX上的文件通常没有文件扩展名，否则用户可能会恶意地错误标记文件类型。

ColdFusion cffile可以使用contentTyperesult（cffile.contentType）的属性来检查mime类型，但这只能在上传后完成。这是您最好的选择，但仍不是100％安全的，因为mime类型仍然可能是错误的。

Question 5

您可以使用JavaScript。考虑到使用JavaScript这样做的最大问题是重置输入文件。好吧，这仅限于JPG（对于PDF，您将不得不更改MIME类型和幻数）：

<form id="form-id">
  <input type="file" id="input-id" accept="image/jpeg"/>
</form>

<script type="text/javascript">
    $(function(){
        $("#input-id").on('change', function(event) {
            var file = event.target.files[0];
            if(file.size>=2*1024*1024) {
                alert("JPG images of maximum 2MB");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            if(!file.type.match('image/jp.*')) {
                alert("only JPG images");
                $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                return;
            }

            var fileReader = new FileReader();
            fileReader.onload = function(e) {
                var int32View = new Uint8Array(e.target.result);
                //verify the magic number
                // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures)
                if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) {
                    alert("ok!");
                } else {
                    alert("only valid JPG images");
                    $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form.
                    return;
                }
            };
            fileReader.readAsArrayBuffer(file);
        });
    });
</script>

考虑到此功能已在最新版本的Firefox和Chrome以及IExplore 10上进行了测试。

有关MIME类型的完整列表，请参见Wikipedia。

有关幻数的完整列表，请参见Wikipedia。

Question 6

我会过滤文件服务器端，因为有一些工具（例如Firefox上的Live HTTP Headers）可以上传任何文件，包括外壳程序。人们可能会入侵您的网站。为了安全起见，请在服务器站点上进行操作。

Question 7

尽管此特定示例是用于多文件上传的，但它提供了一个需要的常规信息：

https://developer.mozilla.org/zh-CN/docs/DOM/File.type

至于在/ download /上处理文件，这不是Javascript问题，而是服务器配置。如果用户未安装任何东西来打开PDF或XLS文件，则他们唯一的选择就是下载它们。

Question 8

如果您希望文件上传控件限制用户可以通过按钮上传的文件类型，请单击“确定”。

<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;

dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];

return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') : 
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>

然后，您可以从类似上述按钮的onClick之类的事件中调用该函数，如下所示：

onClick =“ TestFileType（this.form.uploadfile.value，['gif'，'jpg'，'png'，'jpeg']）;”

您可以将其更改为：PDF和XLS

您可以在此处看到它的实现：演示