如何制作HTML文件来创建文件或读/写文件?有可能吗?
或者是否可以使用JavaScript,jQuery,PHP等其他脚本语言?
我正在尝试这样做:用户提供一些信息并将信息存储到文件中。当用户尝试读取信息时,会读取存储在文件中的信息。
我正在尝试在本地存储(硬盘驱动器)上进行这些文件操作。可以在本地存储上的HTML文件中创建文件夹(HTML文件所在的HTML文件夹)吗?
答案 0 :(得分:3)
无法写入文件*,但是,可以从已拖入您的网页/网络应用程序的文件中读取。
引用Mozilla的Developer Network documentation for the function:
readAsBinaryString方法用于开始读取内容 指定的[...]文件。
FileReader API非常容易使用,只有三个函数可以从文件中获取数据:
这些功能都是异步的。有五个事件可以让您知道文件中的位置,并确定是否仍有数据需要阅读:
<style>
#progress_bar {
margin: 10px 0;
padding: 3px;
border: 1px solid #000;
font-size: 14px;
clear: both;
opacity: 0;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
}
#progress_bar.loading {
opacity: 1.0;
}
#progress_bar .percent {
background-color: #99ccff;
height: auto;
width: 0;
}
</style>
<input type="file" id="files" name="file" />
<button onclick="abortRead();">Cancel read</button>
<div id="progress_bar"><div class="percent">0%</div></div>
<script>
var reader;
var progress = document.querySelector('.percent');
function abortRead() {
reader.abort();
}
function errorHandler(evt) {
switch(evt.target.error.code) {
case evt.target.error.NOT_FOUND_ERR:
alert('File Not Found!');
break;
case evt.target.error.NOT_READABLE_ERR:
alert('File is not readable');
break;
case evt.target.error.ABORT_ERR:
break; // noop
default:
alert('An error occurred reading this file.');
};
}
function updateProgress(evt) {
// evt is an ProgressEvent.
if (evt.lengthComputable) {
var percentLoaded = Math.round((evt.loaded / evt.total) * 100);
// Increase the progress bar length.
if (percentLoaded < 100) {
progress.style.width = percentLoaded + '%';
progress.textContent = percentLoaded + '%';
}
}
}
function handleFileSelect(evt) {
// Reset progress indicator on new file selection.
progress.style.width = '0%';
progress.textContent = '0%';
reader = new FileReader();
reader.onerror = errorHandler;
reader.onprogress = updateProgress;
reader.onabort = function(e) {
alert('File read cancelled');
};
reader.onloadstart = function(e) {
document.getElementById('progress_bar').className = 'loading';
};
reader.onload = function(e) {
// Ensure that the progress bar displays 100% at the end.
progress.style.width = '100%';
progress.textContent = '100%';
setTimeout("document.getElementById('progress_bar').className='';", 2000);
}
// Read in the image file as a binary string.
reader.readAsBinaryString(evt.target.files[0]);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
与FileReader类似,有一个类似的API建议用于编写文件,称为... FileWriter !
然而,since April 2014:
本文档的工作已经停止,不应引用或用作实施的基础。
Google Chrome确实有一个用于写入计算机上FileSystem
文件的API,但它仍适用于扩展程序,但是,就像FileWriter
一样,它也不是由W3C开发的,所以依靠这个功能可能不是一个好主意。
我指向this answer,其中创建了以下函数:
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
此功能将强制浏览器下载一个文件,该文件具有您指定的名称(在第一个参数上)和您想要的内容(在第二个参数上)。
download('can_i_let_the_browser_download_this.txt', 'Yes, I can!');
答案 1 :(得分:1)
在HTML中是不可能的,但您可以使用PHP使用文件方法
来完成更多信息,你可以看看PHP手册
答案 2 :(得分:1)
您的意思是local storage吗? 希望能帮到你。
答案 3 :(得分:1)
正如已经指出的那样,您正在混合服务器端和客户端,并且您对要获得的结果并不十分具体:
您可以在服务器上创建文件,并操纵路旁存储的文件。这可以使用PHP,服务器端JavaScript,Python,Perl来完成......有很多选择。要记住的唯一重要的事情是,您只能在该服务器上创建或修改文件,只有服务器允许时才能看到该文件(例如,使用JavaScript创建一堆数据,将其发送到服务器) ,并将它们存储在那里。)
您也可以使用FileSystem API在客户端上创建文件,正如Patrick Evans所指出的那样。
重要的是要记住:
客户端:
服务器端: