JavaScript-Vorschaubildfunktion für einen aktualisierungsfreien Upload

In diesem Artikel wird die Verwendung von JavaScript vorgestellt, um eine einfache Funktion zum Hochladen von Vorschaubildern ohne Aktualisierung zu implementieren.

In diesem Artikel werden zwei Dinge verwendet: FormData und FileReader.

FileReader wird zum Durchsuchen von Bildern verwendet.

FormData wird für Ajax-Anfragen verwendet.

HTML-Code

Sie müssen zunächst Container für Formulare und Bilder erstellen.

  <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 verwendet werden, um eine Reihe von Schlüssel/Wert-Paaren zum Senden von Anforderungen mithilfe von XMLHttpRequest zusammenzustellen. Wenn der Codierungstyp des Formulars auf „Multipart/Formulardaten“ eingestellt ist, ist das über FormData übertragene Datenformat dasselbe wie das Datenformat, das das Formular über die Methode „submit()“ überträgt.

Hier ruft das FormData-Objekt alle Eingabedaten im Formular ab und verwendet dann eine Ajax-Anfrage, um 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 das Bild in ein Daten-URL-Formular 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-Vorschaubildfunktion für einen aktualisierungsfreien Upload. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!