如何使用javascript确定文件的文件类型答案

【问题标题】：How to determine the file type of a file using javascript如何使用javascript确定文件的文件类型
【发布时间】：2013-10-31 17:14:48
【问题描述】：

我需要有关如何使用 JavaScript 确定文件类型的帮助。例如在这个 html 中。

<div class="indi-download">
<div class="pull-left">
    <h6 class="file-format">%file_display_name%</h6>
</div>
<div class="pull-right">
    <a class="download-link" href="%file_url%">Download</a>
</div>

在这行代码上，

<a class="download-link" href="%file_url%">Download</a>

href="%file_url%" 将返回具有以下扩展名的文件类型：例如：.docx 或 .pdf。

类似的东西。

<a class="download-link" href="http://mysite.com/download/myfiles/sample.pdf">Download</a>

我的问题是，我需要检测使用 javascript 的文件类型。如果是 .pdf，则 .doc 的类 class="file-format" 将变为 class="pdf-file-format" 和 class="doc-file-format"。这取决于文件扩展名。关于如何做到这一点的任何想法？这样做的最佳技巧是什么？

这是我的示例输出，我只想更改文件的图标，这就是我需要更改类名的原因。

编辑我做了这样的事情，但如果列表中有多个项目，它就不起作用。它仅适用于第一项。请帮帮我。

<body onload="myFunction()">
<div class="indi-download">
<div class="pull-left">
    <h6 class="pdf-file" id="file-display-id">%file_display_name%</h6>
</div>
<div class="pull-right">
    <a class="download-link" id="download_link" href="%file_url%">Download</a>
</div>
</div>
</body>

JavaScript

<head>
<script type="text/javascript">
function myFunction()
 {
  var url = document.getElementById("download_link").href;
 var ext = url.split('.').pop();
 if(ext=='pdf'){
 var newfileclass = document.getElementById("file-display-id");
 newfileclass.className="pdf-file";
 }
 else if((ext=='docx')){
 var newfileclass = document.getElementById("file-display-id");
 newfileclass.className="pdf-file doc-file";
}
else if(ext=='zip'){
var newfileclass = document.getElementById("file-display-id");
newfileclass.className="pdf-file zip-file";
}
else{
var newfileclass = document.getElementById("file-display-id");
newfileclass.className="other-file";
}
}
</script> 
</head>

【问题讨论】：

请参考.. [1]: stackoverflow.com/questions/4164894/…
这应该可以帮助你：[extend-regexp-to-get-the-file-extension][1] [1]: stackoverflow.com/questions/14750913/…
如果您对生成的 HTML 有任何影响，请将文件类型（扩展名）作为单独的数据向下发送，并向元素添加数据属性，类似于 data-file-type="pdf" 也许这看起来类似于： <a class="download-link" data-file-type=":file_ext%" href="%file_url%">Download</a> 这就是我们在需要此类数据时所做的事情。 HTML 呈现数据，您的服务器应该提供相关数据来呈现。您的 CSS 还可以根据查询数据属性设置样式..a[data-file-type="pdf"].download-link{...pdf styles...}。很多选择。

标签： javascript html

【解决方案1】：

如果您的所有文件都有扩展名，只需将文件名与extension = filename.split('.'); 分开，然后通过扩展名确定文件类型。

这个怎么样：

function changeClass(fileUrl){
    var extension = fileUrl.split('.').pop();
    if(extension.toLowerCase() == 'pdf')
    {
        return "pdf-file-format";
    }

}

$(document).ready(function(){
    $(a).live().addClass(changeClass( $(a).attr('href') ) );
});

这是一种伪代码，我还没有测试过，但我想你明白我的意思；）

正如 Lakshmi 所说：How to get a extension of a file using jquery or javascript?

【讨论】：

是的。我认为拆分文件将是一个很好的选择。我还在上面编辑了我的问题。我认为它有效，但仅在第一个项目上，我需要循环项目吗？
$(a).live() 检查页面 afaik 上的所有链接

【解决方案2】：

课程必须是“pdf-file-format”吗？我直接通过 CSS 检测我自己网站上的 .pdf 文件链接，例如

a[href$="pdf"] { /* css styles for pdf links */ }

嗯？

【讨论】：

【解决方案3】：

给标签一个id

<a class="download-link" id="download_link" href="http://mysite.com/download/myfiles/sample.pdf">Download</a>

并使用这个javascript函数来改变类

var change_class_a = function(url) {
    var m = url.match(/(.*)[\/\\]([^\/\\]+)\.(\w+)$/);
    if(m[3] == 'pdf')
       document.getElementById("download_link").className = "YOUR_CLASS";

};

var url = document.getElementById("download_link").href;
change_class_a(url);

【讨论】：