JavaScript implementiert das Hochladen und Anzeigen einer Vorschau von Bildern ohne Aktualisierung

In diesem Artikel wird hauptsächlich die Funktion zum Hochladen von Vorschaubildern ohne Aktualisierung mit JavaScript vorgestellt. Interessierte Freunde können sich auf

Wie implementiert man die Funktion zum Hochladen ohne Aktualisierung beziehen? Für den handschriftlichen Upload ohne Aktualisierung sind zwei Dinge erforderlich: FormData und FileReader.

FileReader wird zum Durchsuchen von Bildern verwendet.

FormData wird für Ajax-Anfragen verwendet.

HTML-Code

Erstellen Sie zunächst einen Container für das Formular und das Bild

  <form enctype="multipart/form-data" id="oForm">
    <input type="file" name="file" id="file" onchange="readAsDataURL()" />
    <input type="button" value="提交" onclick="doUpload()" />
  </form>
  <p>
    <img alt="" id="img"/>
  </p>

Javascript-Code

FormData:

Das FormData-Objekt kann zum Zusammenstellen einer Reihe von Schlüssel-/Wertpaaren verwendet werden zum Senden von Anfragen mit XMLHttpRequest. Das Versenden von Formulardaten wird dadurch flexibler und komfortabler, da es unabhängig vom Formular genutzt werden kann. Wenn Sie den Kodierungstyp des Formulars auf „multipart/form-data“ festlegen, ist das über FormData übertragene Datenformat dasselbe wie das Datenformat, das vom Formular über die Methode „submit()“ übertragen wird.

Hier wird das FormData-Objekt verwendet, um alle Eingabedaten im Formular abzurufen und dann mithilfe einer Ajax-Anfrage die Daten an die angegebene URL zu senden, sodass beim Absenden des Formulars kein Sprung erfolgt.

  function doUpload() { 
     var formData = new FormData($( "#oForm" )[0]); 
     console.log(formData); 
     $.ajax({ 
       url: 'pp', 
       type: 'POST', 
       data: formData, 
       async: false, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function (returndata) { 
         console.log(returndata); 
       }, 
       error: function (returndata) { 
         console.log(returndata); 
       } 
     }); 
  }

FileReader:

Das FileReader-Objekt ermöglicht das asynchrone Lesen von Webanwendungen Der Inhalt einer Datei (oder eines Rohdatenpuffers), die auf dem Computer des Benutzers gespeichert ist. Verwenden Sie ein Datei- oder Blob-Objekt, um die zu lesende Datei oder die zu lesenden Daten anzugeben.

Hier wird das FileReader-Objekt verwendet, um das Bild aus der Datei abzurufen und in das Daten-URL-Format umzuwandeln, um es im vorab erstellten Container anzuzeigen.

function readAsDataURL(){
  //检验是否为图像文件
    var file = document.getElementById("file").files[0];
    if(!/image\/\w+/.test(file.type)){
      alert("看清楚，这个需要图片！");

      return false;
    }else{
    var reader = new FileReader();
    //将文件以Data URL形式读入页面
    reader.readAsDataURL(file);
    reader.onload=function(e){
      var result=document.getElementById("img");
      //显示文件
      result.src= this.result ;
    }
  }
}

Das obige ist der detaillierte Inhalt vonJavaScript implementiert das Hochladen und Anzeigen einer Vorschau von Bildern ohne Aktualisierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!