Comment JS obtient-il la valeur de input[file] et l'affiche-t-il sur la page ? (Tutoriel image et texte)

Maintenant, je vais partager avec vous une méthode d'implémentation JS pour obtenir la valeur de input[file] et l'afficher sur la page. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

L'exemple est le suivant :

$(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);
})

Ce qui précède est ce que j'ai compilé pour tout le monde Oui, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Exemple de vue combiné avec Echarts pour obtenir un effet de surbrillance des clics

vue implémente la surbrillance des clics pour un Méthode de balise

Méthode de réglage de la barre de menu de navigation Vue-Route

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!