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

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

javascript html

如何使用javascript确定文件的文件类型,javascript,html,Javascript,Html,我需要关于如何使用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

我需要关于如何使用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>


%文件\u显示\u名称%

在这行代码中

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

href=“%file\u url%”将返回具有以下扩展名的文件类型：例如：.docx或.pdf

像这样的

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

我的问题是，我需要使用javascript检测文件的类型。如果它是.pdf，则class=“file format”将更改为class=“pdf file format”和class=“doc file format”for.doc。这取决于文件扩展名。你知道怎么做吗？做这件事最好的诀窍是什么

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

编辑我做了类似的事情，但如果列表上有多个项目，它就不起作用。这只是第一项工作。请帮帮我

<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>


%文件\u显示\u名称%

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>


函数myFunction（）
{
var url=document.getElementById（“下载链接”）.href；
var ext=url.split（'.'）.pop（）；
如果（ext=='pdf'）{
var newfileclass=document.getElementById（“文件显示id”）；
newfileclass.className=“pdf文件”；
}
else if（（ext=='docx'））{
var newfileclass=document.getElementById（“文件显示id”）；
newfileclass.className=“pdf文件文档文件”；
}
else if（ext=='zip'）{
var newfileclass=document.getElementById（“文件显示id”）；
newfileclass.className=“pdf文件zip文件”；
}
否则{
var newfileclass=document.getElementById（“文件显示id”）；
newfileclass.className=“其他文件”；
}
}

如果所有文件都有扩展名，只需使用

扩展名=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') ) );
});

这是一种伪代码，我还没有对它进行测试，但我想你已经明白了我的想法；）

同样正如拉克希米所说：

课程必须是“pdf文件格式”吗？我直接通过CSS在自己的网站上检测到.pdf文件链接，比如

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

呃？

给标签一个id

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

请参考。。[1] ：这将帮助您：[扩展regexp以获取文件扩展名][1][1]：如果您对正在生成的HTML有任何影响，请将文件类型（扩展名）作为单独的数据发送下来，并向元素添加数据属性，类似于

data file type=“pdf”

也许这看起来类似于：

这就是我们在需要此类数据时正在做的事情。HTML呈现数据，服务器应提供要呈现的相关数据。您的CSS还可以基于查询数据属性来设置样式。

a[data file type=“pdf”]。下载链接{…pdf styles…}

。有很多选择。我认为分割文件将是一个伟大的选择。我还编辑了上面的问题。我想它正在工作，但只在第一个项目上，我需要循环项目吗？

$（a）.live（）

检查页面上的所有链接afaik

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);