“."/> “.">
Heim > Artikel > Web-Frontend > So finden Sie lokale Dateien in Javascript
Die Ankunft des digitalen Zeitalters hat Privatpersonen und Unternehmen mehr Komfort gebracht, aber auch verschiedene Probleme verursacht, wie z. B. Datenschutzverletzungen, Dateiverlust usw. Viele Unternehmen möchten einige sensible Daten wie Unternehmensabschlüsse, Kundeninformationen usw. nicht in der Cloud speichern, sondern entscheiden sich dafür, sie lokal zu speichern. Der Speicherort lokaler Dateien muss im Browser gefunden und aufgerufen werden. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript den Speicherort lokaler Dateien ermitteln.
Erstellen Sie zunächst ein Dateieingabefeld in HTML mit dem Tag <input type="file">
, wie unten gezeigt: <input type="file">
标签,如下所示:
<input type="file" id="fileInput">
一旦用户选择了一个文件,可以将其添加到一个全局变量中,以便稍后在代码中访问。可以使用JavaScript的FileReader
对象来读取文件并获取文件内容。
let selectedFile; document.getElementById('fileInput').addEventListener('change', (event) => { selectedFile = event.target.files[0]; console.log(selectedFile); });
当用户选择文件时,change
事件将被触发,这将允许我们访问所选文件的信息。我们将event
对象作为参数传递给事件处理程序,然后访问event.target.files
数组,该数组包含用户选择的所有文件。在这里,我们只选择用户选择的第一个文件,并将其分配给selectedFile
变量。最后,我们将selectedFile
对象打印到控制台,以确保已选择正确的文件。
现在,我们已经选择了本地文件并将其保存到全局变量中,接下来的任务是确定其所在的路径。在JavaScript中获取本地文件的路径通常是不可能的,因为Web浏览器出于安全考虑不允许访问用户本地文件系统的完整路径。但是,我们可以通过使用File API的URL.createObjectURL()函数来生成一个能够访问所选文件的URL。这个URL是唯一的,与任何用户上传的其他文件或URL不同,可以将其用作存储文件或将其用作其他用途的唯一ID。
现在,我们可以通过以下代码获取选定文件的URL:
const fileURL = URL.createObjectURL(selectedFile);
现在,我们已经有了一个可用于访问文件的唯一URL,但是我们如何确定文件所在的文件夹路径?事实上,这是不可能的,因为JavaScript不能访问用户的本地文件系统。当我们使用URL.createObjectURL()
函数时,浏览器会自动创建一个虚拟文件路径,用于访问所选文件。因此,我们可能会知道文件的名称、类型和内容,但我们不知道其所在的文件夹路径。如果我们需要访问文件夹路径,我们需要要求用户提供该信息。例如,我们可以要求用户在文件名之后加上文件夹路径,以便存储文件时将其添加到正确的文件夹中。
综上所述,JavaScript不能直接访问用户的本地文件系统,但是我们可以使用FileReader
对象和URL.createObjectURL()
rrreee
FileReader
-Objekt von JavaScript verwenden, um Dateien zu lesen und Dateiinhalte abzurufen. 🎜rrreee🎜Wenn der Benutzer eine Datei auswählt, wird das Ereignis change
ausgelöst, das uns den Zugriff auf die Informationen der ausgewählten Datei ermöglicht. Wir übergeben das event
-Objekt als Parameter an den Event-Handler und greifen dann auf das Array event.target.files
zu, das alle vom Benutzer ausgewählten Dateien enthält. Hier wählen wir nur die erste vom Benutzer ausgewählte Datei aus und weisen sie der Variablen selectedFile
zu. Abschließend drucken wir das Objekt selectedFile
auf der Konsole aus, um sicherzustellen, dass die richtige Datei ausgewählt wurde. 🎜🎜Nachdem wir nun die lokale Datei ausgewählt und in einer globalen Variablen gespeichert haben, besteht die nächste Aufgabe darin, den Pfad zu bestimmen, in dem sie sich befindet. Das Abrufen des Pfads zu einer lokalen Datei in JavaScript ist normalerweise nicht möglich, da Webbrowser aus Sicherheitsgründen keinen Zugriff auf den vollständigen Pfad des lokalen Dateisystems des Benutzers zulassen. Wir können jedoch eine URL generieren, die auf die ausgewählte Datei zugreifen kann, indem wir die Funktion URL.createObjectURL() der Datei-API verwenden. Diese URL ist einzigartig und unterscheidet sich von allen anderen vom Benutzer hochgeladenen Dateien oder URLs. Sie kann als eindeutige ID zum Speichern der Datei oder für andere Zwecke verwendet werden. 🎜🎜Jetzt können wir die URL der ausgewählten Datei mit dem folgenden Code abrufen: 🎜rrreee🎜Jetzt haben wir eine eindeutige URL, die für den Zugriff auf die Datei verwendet werden kann, aber wie bestimmen wir den Ordnerpfad, in dem sich die Datei befindet? ? Tatsächlich ist dies unmöglich, da JavaScript nicht auf das lokale Dateisystem des Benutzers zugreifen kann. Wenn wir die Funktion URL.createObjectURL()
verwenden, erstellt der Browser automatisch einen virtuellen Dateipfad für den Zugriff auf die ausgewählte Datei. Wir kennen also möglicherweise den Namen, den Typ und den Inhalt der Datei, aber nicht den Pfad zum Ordner, in dem sie sich befindet. Wenn wir auf den Ordnerpfad zugreifen müssen, müssen wir den Benutzer bitten, diese Informationen anzugeben. Beispielsweise könnten wir verlangen, dass der Benutzer dem Dateinamen den Ordnerpfad folgt, damit die Datei beim Speichern zum richtigen Ordner hinzugefügt wird. 🎜🎜Zusammenfassend lässt sich sagen, dass JavaScript nicht direkt auf das lokale Dateisystem des Benutzers zugreifen kann, aber wir können das Objekt FileReader
und die Funktion URL.createObjectURL()
verwenden, um die vom Benutzer ausgewählte Datei zu lesen Datei und generiert eine eindeutige URL, um innerhalb einer Webanwendung auf den Inhalt der Datei zuzugreifen. Wenn wir auf einen Ordnerpfad zugreifen müssen, müssen wir diese Informationen vom Benutzer erhalten, indem wir ihn beispielsweise bitten, hinter dem Dateinamen den Ordnerpfad anzugeben. 🎜Das obige ist der detaillierte Inhalt vonSo finden Sie lokale Dateien in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!