jquery ruft die Details der hochgeladenen Datei ab

Dieses Mal bringe ich Ihnen JQuery mit, um die detaillierten Informationen der hochgeladenen Datei zu erhalten. Was sind die Vorsichtsmaßnahmen für JQuery, um die detaillierten Informationen der hochgeladenen Datei zu erhalten? Schauen Sie mal rein.

Bevor

die Datei auf den Server hochgeladen wird, können wir über jquery den Namen, den Typ und die Größe der hochgeladenen Datei abrufen.

Wenn Benutzer Dateien über das Tag hochladen, können wir normalerweise den Namen der hochgeladenen Datei sehen. Die HTML5-Datei-API bietet uns eine sichere Möglichkeit, clientseitig auf Dateien auf dem Computer zuzugreifen und Operationen an diesen Dateien besser durchzuführen.

Zu den Browsern, die die Datei-API unterstützen, gehören IE10+, Firefox4+, Safari5.0.5+, Opera11.1+ und Chrome.

Die Datei-API fügt einige Schnittstellen für den direkten Zugriff auf Dateiinformationen basierend auf dem Dateieingabefeld des Formulars hinzu. HTML5 fügt dem DOM eine Dateisammlung für Dateieingabeelemente hinzu. Wenn eine oder mehrere Dateien über das Dateieingabefeld ausgewählt werden, enthält die Dateisammlung eine Reihe von Dateiobjekten, wobei jedes Dateiobjekt einer Datei entspricht. Jede Datei verfügt über die folgenden schreibgeschützten Attribute:

• Name: Der Name der Datei im lokalen

  Dateisystem .

• Größe: Die Anzahl der Bytes in der Datei.

• Typ: MIME-Typ der Datei.

• lastModifiedDate: Der Zeitpunkt, zu dem die Datei zuletzt geändert wurde.

Über diese Dateischnittstelle können wir den Namen, den Typ und die Größe der hochgeladenen Datei in jquery abrufen. Erleben Sie den Effekt anhand der Demo unten.

1. Verwenden Sie die Schaltfläche „Datei auswählen“, um die hochzuladende Datei auszuwählen.

2. Nachdem Sie die Datei ausgewählt haben, klicken Sie auf die Schaltfläche „Detaillierte Informationen der hochgeladenen Datei anzeigen“, um die detaillierten Informationen der Datei anzuzeigen.

Um mehrere Dateien gleichzeitig hochzuladen, müssen Sie das Mehrfachattribut zum Datei-Upload-Tag hinzufügen. Die HTML-Struktur der obigen Demo lautet wie folgt:

<input id="fUpload" multiple type="file" /><br />
<ul id="ulList">
</ul>
<input id="btnShow" type="button" value="显示上传文件的详细详细" />

Im JQuery-Code wird zunächst die Anzahl der ausgewählten Dateien erkannt und dann die detaillierten Informationen jeder Datei über eine Schleife abgerufen. Der vollständige JQuery-Code lautet wie folgt:

$("#btnShow").on('click', function () {
  $("#ulList").empty();
  var fp = $("#fUpload");
  var lg = fp[0].files.length; // get length
  var items = fp[0].files;
  var fragment = "";
   
  if (lg > 0) {
    for (var i = 0; i < lg; i++) {
      var fileName = items[i].name; // get file name
      var fileSize = items[i].size; // get file size 
      var fileType = items[i].type; // get file type
 
      // append li to UL tag to display File info
      fragment += "<li>" + fileName + " (<b>" + fileSize + "</b> bytes) - Type :" + fileType + "</li>";
    }
 
    $("#ulList").append(fragment);
  }
});

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Knoten implementiert die Bildverifizierungscode-Funktion während der Anmeldung

Die übergeordnete Vue-Komponente übergibt den Wert an die übergeordnete Komponente Detaillierte Erläuterung der Schritte

Das obige ist der detaillierte Inhalt vonjquery ruft die Details der hochgeladenen Datei ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!