Heim  >  Artikel  >  Web-Frontend  >  Wie erhält JS den Wert von input[file] und zeigt ihn auf der Seite an? (Bild- und Text-Tutorial)

Wie erhält JS den Wert von input[file] und zeigt ihn auf der Seite an? (Bild- und Text-Tutorial)

亚连
亚连Original
2018-05-31 14:17:162407Durchsuche

Jetzt werde ich Ihnen eine JS-Implementierungsmethode vorstellen, mit der Sie den Wert der Eingabe [Datei] erhalten und auf der Seite anzeigen können. Sie hat einen guten Referenzwert und ich hoffe, dass sie für alle hilfreich ist.

Das Beispiel ist wie folgt:

$(document).on('change', '.photo-box .file', function () {
  //alert($(this).val());
  function getObjectURL(file) {
    var url = null;
    if (window.createObjectURL != undefined) { // basic
      url = window.createObjectURL(file);
    } else if (window.URL != undefined) { // mozilla(firefox)
      url = window.URL.createObjectURL(file);
    } else if (window.webkitURL != undefined) { // webkit or chrome
      url = window.webkitURL.createObjectURL(file);
    }
    return url;
  }
  var objUrl = getObjectURL(this.files[0]);
  console.log("objUrl = " + objUrl);
  var html = &#39;<p class="photo-box"><img src="&#39; + objUrl + &#39;" alt=""><p class="photo-btn"><p>删除</p></p></p>&#39;;
  $(this).parent().parent().append(html);
})

Das Obige ist das, wofür ich zusammengestellt habe Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Beispiel für Vue in Kombination mit Echarts, um einen Klick-Hervorhebungseffekt zu erzielen

vue implementiert die Klick-Hervorhebung eines Tag-Methode

Vue-Route-Navigationsmenüleiste Hervorhebungseinstellungsmethode

Das obige ist der detaillierte Inhalt vonWie erhält JS den Wert von input[file] und zeigt ihn auf der Seite an? (Bild- und Text-Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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