Heim > Artikel > Web-Frontend > Wie lade ich eine Datei ohne Formular mit JavaScript hoch?

Wie lade ich eine Datei ohne Formular mit JavaScript hoch?

PHPznach vorne: 2023-09-09 23:45:031402Durchsuche

如何使用 JavaScript 上传没有表单的文件？

Manchmal müssen Entwickler möglicherweise Dateien hochladen, ohne JavaScript-Formulare zu verwenden. Normalerweise erstellen wir ein Formular, um Daten und Dateien vom Benutzer abzurufen. In diesem Tutorial erfahren wir jedoch, wie wir die Dateien ohne Formular vom Benutzer abrufen und an das Backend senden.

Verwendung von FormData()-Objekten und Ajax-Anfragen

Das

FormData-Objekt ermöglicht es uns, Formulardaten in Schlüssel-Wert-Paaren zu speichern. Wir müssen den Konstruktor verwenden, um Variablen zu initialisieren. Wir können dem Benutzer erlauben, eine Datei mithilfe der HTML-Eingabe hochzuladen und diese Datei in den Formulardaten zu speichern. Anschließend können wir die Formulardaten an das Backend senden.

Grammatik

Benutzer können der folgenden Syntax folgen, um Dateien mithilfe des FormData()-Objekts und einer Ajax-Anfrage ohne Verwendung eines Formulars hochzuladen.

form_data.append("file", uploadedFile);
$.ajax({
   url: "URL",
   method: "POST",
   data: form_data,
});

In der obigen Syntax verwenden wir die Methode append(), um eine Datei zum Formulardatenobjekt hinzuzufügen. Zusätzlich verwenden wir ajax(), um Daten an die API zu senden.

Beispiel

Im folgenden Beispiel haben wir mit dem -Tag eine Dateieingabe in HTML erstellt. Wenn in JavaScript ein Benutzer eine Datei hochlädt, greifen wir darauf zu und fügen sie dem form_data-Objekt hinzu.

Danach senden wir die Datei per POST-Anfrage mit Ajax an die API.

<html>
<head>
   <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>
<body>
   <h3>Using the <i>FormData object and ajax request</i> to upload a file without using the form data in JavaScript</h3>
   <input type = "file" name = "file" id = "file_input" />
   <div id = "content"> </div>
   <script>
      $(document).on('change', '#file_input', function () {
         let uploadedFile = document.getElementById('file_input').files[0];
         var form_data = new FormData();
         form_data.append("file", uploadedFile);
         $.ajax({
            url: "URL",
            method: "POST",
            data: form_data,
         });
      });
   </script>
</body>
</html>

Einfaches Upload-Plugin mit jQuery

jQuery enthält ein einfaches Upload-Plugin, mit dem wir Dateien an die API senden können. Wir müssen das CDN des einfachen Upload-Plugins zum Abschnitt

hinzufügen, um es verwenden zu können. Wenn ein Entwickler die Anwendung verwendet, kann er NPM-Befehle verwenden, um das Paket zu installieren.

Grammatik

Benutzer sollten die folgende Syntax befolgen, um formularlose Dateien mit JavaScript und dem jQuery Simple Upload-Plugin hochzuladen.

$(this).simpleUpload("URL", {
   start: function (file) {
      
      //upload started
   },
});

In der obigen Syntax rufen wir die Funktion simpleUpload() des einfachen Upload-Plug-Ins auf, um Dateien hochzuladen.

Beispiel

Im folgenden Beispiel haben wir den Pfad zur Datei simpleUpload.min.js im Abschnitt

hinzugefügt. Wir haben der Dateieingabe ein „Änderungs“-Ereignis hinzugefügt. In der Callback-Funktion rufen wir die Funktion simpleUpload() mit der Dateieingabe als Referenz auf. Wir übergeben dieses Objekt als zweiten Parameter der Funktion simpleUpload() mit dem Schlüssel und der Rückruffunktion als Werte.

<html>
<head> 
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
   <script src= "https://cdn.jsdelivr.net/npm/jquery-simpleupload@1.1.0/simpleUpload.min.js"> </script>
</head>
<body>
   <h3>Using the <i>jQuery simple upload</i> plugin to upload the file without using the form</h3>
   <input type = "file" name = "file" id = "file_input">
   <div id = "content"> </div>
   <script>
      $('#file_input').change(function () {
         $(this).simpleUpload("abcd.php", {
            start: function (file) {
               
               //upload started
               content.innerHTML = "upload started";
            },
         });
      });
   </script>
</body>
</html>

Benutzer haben zwei verschiedene Möglichkeiten zum Hochladen von Dateien kennengelernt, ohne Formulare in JavaScript zu verwenden. In der ersten Methode haben wir das FormData-Objekt und die ajax()-Methode verwendet. Bei der zweiten Methode haben wir das einfache Upload-Plugin von Jquery verwendet.

Das obige ist der detaillierte Inhalt vonWie lade ich eine Datei ohne Formular mit JavaScript hoch?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript jquery ajax html npm 构造函数回调函数 append JS 对象事件

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie erstelle ich mit FabricJS eine Leinwand mit einem Kreis?Nächster Artikel：Wie erstelle ich mit FabricJS eine Leinwand mit einem Kreis?

In Verbindung stehende Artikel

Mehr sehen