如何使输入类型=文件应只接受PDF和XLS(How to make input type= file

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

现在我想只接受.pdf和.xls文件来限制此。

当我点击提交按钮，应该验证这一点。

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

任何人都可以请给这一些例子？

Answer 1:

你可以通过使用属性，这样做的accept和允许添加MIME类型吧。但是，并非所有的浏览器都尊重这个属性，它可以很容易地通过一些代码检查删除。因此，在这两种情况下，你需要检查服务器端的文件类型（第二个问题）。

例：

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

关于第三个问题：“当我点击网页上的文件（PDF / XLS），它会自动将打开。”：

你不能做到这一点。如何PDF或XLS打开客户机上的用户设置。

Answer 2:

您可以使用此：

HTML

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

仅支持。 PDF和。 XLS文件

Answer 3:

不幸的是，有没有保证的方式在选择的时间去做。

有些浏览器支持accept的属性input标签。这是一个良好的开端，但不能在完全依赖。

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

您可以使用cfinput和运行验证检查在提交文件的扩展名 ，而不是MIME类型。这是更好，但仍然没有防呆。在OSX上的文件往往没有文件扩展名或用户可以恶意误标文件类型。

ColdFusion的cffile可以检查使用MIME类型contentType结果（财产cffile.contentType ），但只能在上传后进行。这是你最好的选择，但仍然没有100％安全的MIME类型仍然可能是错误的。

Answer 4:

你可以使用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类型的完整列表，请参阅维基百科。

对于幻数的完整列表，请参阅维基百科。

Answer 5:

虽然这个具体的例子是一个多文件上传，它给人们需要的基本信息：

https://developer.mozilla.org/en-US/docs/DOM/File.type

至于作用于在/下载文件/这不是一个JavaScript的问题 - 而是一个服务器配置。如果用户没有安装打开PDF或XLS文件的东西，他们唯一的选择将是下载它们。

Answer 6:

我会过滤文件服务器端，因为有一些工具，如Firefox的活HTTP头，将允许上传任何文件，包括一个外壳。人们可以砍你的网站。难道它的服务器站点，是安全的。

Answer 7:

如果你想在文件上传控制来限制的文件类型用户可以点击一个按钮上传，那么这是该方式..

<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事件的函数：