So erhalten Sie mit JQuery den Namen, den Typ und die Größe der hochgeladenen Datei

Dieses Mal zeige ich Ihnen, wie Sie mit jquery den Namen, den Typ und die Größe der hochgeladenen Datei ermitteln. Welche Vorsichtsmaßnahmen gibt es bei der Verwendung von jquery, um den Namen, den Typ und die Größe der hochgeladenen Datei abzurufen? Werfen wir einen Blick darauf.

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 im Tag Datei-Upload 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:

So verwenden Sie Bootstrap im Vue-Cli-Projekt

So verwenden Sie JS, um die des Benutzers zu erhalten Stadt und Standort Geografischer Standort

Das obige ist der detaillierte Inhalt vonSo erhalten Sie mit JQuery den Namen, den Typ und die Größe der hochgeladenen Datei. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!