JavaScript - 扫描并创建文件夹中的链接文件 [英] JavaScript - Scan and create link files from a folder
问题描述
我创建了一堆本地HTML文件，我试图翻译它们，这要归功于xml文件和很多JavaScript / JQuery。翻译部分已经完成，现在我正在尝试使用所有xml文件做一个下拉菜单来选择所需的语言。
首先，我尝试扫描一个本地文件夹名为图像，并打印我的文件的名称在一个空白的HTML页面，但我无法做到这一点。我在堆栈溢出和 forum.jquery.com 上做了大量研究，但即使我尝试了很多事情，没有任何工作。
这是我现在所拉的：
HTML端：
p> < body>
< div id =fileNames>
< p>< / p>
< / div>
< script> window.onload = ChangeLangue< / script>
< / body>
JS / Jquery端：
var folder =images /; $ b $ .ajax（{
url：文件夹，
成功：函数（数据）{
$（data）.find（a）。attr（href，函数（i，val）{
if（val.match（/ \。（jpe？g | png | gif）$ /））{
$（body）。append（< ; img src ='+ folder + val +'>）;
}
}）;
}
}）;
我做错了什么？这可能吗？
浏览器不允许交叉源请求。因为
交叉原点请求仅支持协议模式：http，data，chrome，chrome-extension，https。因为协议是 file：//
您可以通过设置一个标志来实现：
-
退出Chrome浏览器。
使用以下命令重新启动。
MAC ：在终端中，打开/ Applications / Google\ Chrome.app --args - 允许文件从文件访问
WINDOWS ：运行中， C：/PATH_TO_CHROME_INSTALLATION_FOLDER/chrome.exe - 允许从文件访问文件
现在你可以从您的计算机访问文件。要验证它，你可以到 chrome：// version ，你可以看到标志在命令行部分。
因为您有 var folder =images /，假设在浏览器中加载的页面位于 / Users / Default / Desktop 文件夹中，则发出的ajax请求将为
file：/// Users / Default / Desktop / images
在文件夹 var folder =/ images /，
之前的code> / ，请求将为 file：/// images / 。
确保提供必需/完整的路径。
得到响应后，由于响应是html格式，所以可以使用 document.write（response）。从那里你可以查看和导航进出文件夹。
我尝试了下面的JS代码并得到了结果。
< script type =application / javascript>
var url =/ Users / Default / Downloads;
var req = new XMLHttpRequest（）;
req.open（GET，url，true）;
req.onreadystatechange = function（）{
if（req.readyState === 4）
{
document.write（req.responseText）;
}
};
req.send（）;
< / script>
：不知道它是否适用于Windows机器。纠正我，如果我错了。 TIA。
I have created a bunch of local HTML files and I'm trying to translate them thanks to xml files and a lot of JavaScript/JQuery. The translation part is done and I'm now trying to do a pulldown menu with all of the xml files to select the desired language.
First, I tried to scan a local folder named "images" and print the name of my files in a blank html page but I was not able to do it. I did a lot of research on stack overflow and on forum.jquery.com but even if I tried a lot of things, nothing worked.
Here is what I pulled of for the moment :
HTML side :
<body>
<div id="fileNames">
<p></p>
</div>
<script>window.onload=ChangeLangue</script>
</body>
JS/Jquery side :
var folder = "images/";
$.ajax({
url: folder,
success: function (data) {
$(data).find("a").attr("href", function (i, val) {
if (val.match(/\.(jpe?g|png|gif)$/)) {
$("body").append("<img src='" + folder + val + "'>");
}
});
}
});
What am I doing wrong? Is this possible?
Browsers don't allow cross origin requests. An error will be thrown as
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. Because the protocol is file://
You can do it by setting a flag:
Quit Chrome.
Restart using following command.
MAC : In terminal, open /Applications/Google\ Chrome.app --args --allow-file-access-from-files
WINDOWS : In Run, C:/PATH_TO_CHROME_INSTALLATION_FOLDER/chrome.exe --allow-file-access-from-files
Now you can access the files from your computer. To verify it, you can go to chrome://version and you can see the flag enabled under the Command Line section.
As you have var folder="images/", and suppose the page loaded in the browser is in /Users/Default/Desktop folder, the ajax request made will be
file:///Users/Default/Desktop/images
If you add / before the folder var folder = "/images/",
the request will be file:///images/.
Make sure to provide the required/complete path.
After getting the response, since the response is in html format, you can use document.write(response). From there you can view and navigate in/out of folders.
I tried with below JS Code and got the result.
<script type="application/javascript">
var url = "/Users/Default/Downloads";
var req = new XMLHttpRequest();
req.open("GET",url,true);
req.onreadystatechange=function(){
if(req.readyState === 4)
{
document.write(req.responseText);
}
};
req.send();
</script>
P.S. : No idea if it works in Windows machines. Correct me if I am wrong. TIA.
这篇关于JavaScript - 扫描并创建文件夹中的链接文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
