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!
