Verwenden Sie JQuery, um den spezifischen Inhalt der hochgeladenen Datei abzurufen

Dieses Mal zeige ich Ihnen, wie Sie mit jquery den spezifischen Inhalt hochgeladener Dateien abrufen. Welche Vorsichtsmaßnahmen gibt es für die Verwendung von jquery, um den Inhalt hochgeladener Dateien abzurufen?

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 Dateiname 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 ermittelt 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:

So verwalten Sie die Vue-Projekt-API-Schnittstelle

Node erstellt beim Anmelden einen Bildbestätigungscode

Das obige ist der detaillierte Inhalt vonVerwenden Sie JQuery, um den spezifischen Inhalt der hochgeladenen Datei abzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!