Javascript - 检索文件夹中文件的名称
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29340664/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Javascript - Retrieve names of files in a folder
提问by iQuestProgrammer
I have a requirement where I need to retrieve all the filenames from a folder in client side.
我有一个要求，我需要从客户端的文件夹中检索所有文件名。
Hence I am trying to retrieve the names of the files in a folder using Jquery referring to this answer.
因此，我正在尝试使用 Jquery 引用此答案来检索文件夹中文件的名称。
My code is as follows:
我的代码如下：
<script>
var fileExt = ".xml";
$(document).ready(
function(){
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: 'xml/',
success: function (data) {
$("#fileNames").html('<ul>');
//List all xml file names in the page
$(data).find('a:contains(" + fileExt + ")').each(function () {
var filename = this.href.replace(window.location, "").replace("http:///", "");
$("#fileNames").append( '<li>'+filename+'</li>');
});
$("#fileNames").append('</ul>');
}
});
});
</script>
HTML code is as follows:
HTML代码如下：
<div id="fileNames"></div>
But I get the following error when I run the code in chrome and firefox:
但是当我在 chrome 和 firefox 中运行代码时出现以下错误：
chrome: XMLHttpRequest cannot load file:///E:/Test/xml/. Received an invalid response. Origin 'null' is therefore not allowed access.
Firefox: ReferenceError: $ is not defined
chrome：XMLHttpRequest 无法加载 file:///E:/Test/xml/。收到无效响应。因此，不允许访问 Origin 'null'。
Firefox：ReferenceError：$ 未定义
I have tried googling a lot but the error is not resolved.
我尝试了很多谷歌搜索，但错误没有解决。
Your help would highly be appreciated.
您的帮助将不胜感激。
采纳答案by Bhushan Pawar
<html>
<body>
<div id='fileNames'></div>
</body>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$.get(".", function(data)
{
$("#fileNames").append(data);
});
})
</script>
this will print all the files in a folder on webpage.
这将打印网页上文件夹中的所有文件。
回答by shyammakwana.me
It looks like you are running it by double clicking on html file. So it will run in browser with fileprotocol.
You have to run it from server like http://localhost/myhtml.html.
看起来您是通过双击 html 文件来运行它的。所以它将在浏览器中使用file协议运行。你必须像http://localhost/myhtml.html.
I have tried code in my system, it's working with server.
我已经在我的系统中尝试过代码，它正在与服务器一起工作。
Plus
加
you have syntax error in below line
你在下面一行有语法错误
$(data).find('a:contains(" + fileExt + ")').each(function () {
replace above with this
用这个替换上面的
$(data).find("a:contains(" + fileExt + ")").each(function () {
I'm on ubuntu system, and with chrome browser, you do not need to replace location. because it is returning relative path to location.
我在 ubuntu 系统上，使用 chrome 浏览器，您不需要替换位置。因为它正在返回到位置的相对路径。
UPDATE
更新
Your final code should look like this
您的最终代码应如下所示
<script type="text/javascript">//<![CDATA[
$(window).load(function(){
var fileExt = ".xml";
$(document).ready(function(){
$.ajax({
//This will retrieve the contents of the folder if the folder is configured as 'browsable'
url: 'xml/',
success: function (data) {
console.log(data);
$("#fileNames").html('<ul>');
//List all xml file names in the page
//var filename = this.href.replace(window.location, "").replace("http:///", "");
//$("#fileNames").append( '<li>'+filename+'</li>');
$(data).find("a:contains(" + fileExt + ")").each(function () {
$("#fileNames").append( '<li>'+$(this).text()+'</li>');
});
$("#fileNames").append('</ul>');
}
});
});
});
//]]>
</script>
