Heim > Web-Frontend > js-Tutorial > jquery ruft die Details der hochgeladenen Datei ab

jquery ruft die Details der hochgeladenen Datei ab

php中世界最好的语言
Freigeben: 2018-04-27 16:05:52
Original
2911 Leute haben es durchsucht

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="显示上传文件的详细详细" />
Nach dem Login kopieren
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);
  }
});
Nach dem Login kopieren
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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage