Wie lade ich ein img attr "src" nach einem Ajax-Aufruf neu, ohne den Dateinamen aus dem Image-Tag zu kennen?
Ich habe dieses HTML:
<div class="d-inline-flex">
<img id="reloadIMG" class="p-3 mt-5 imgP" onDragStart="return false" <?php echo htmlentities($avatar, \ENT_QUOTES, 'UTF-8', false); ?>>
<input type="file" id="uploadAvatar" name="uploadedAvatar">
</div>
der Wert von $avatar:
$pathFolderAvatar = 'user/'.$folder.'/avatar/*';
$imgUserPastaAvatar = glob($pathFolderAvatar)[0] ?? NULL;
if(file_exists($imgUserPastaAvatar)){
$avatar = 'src='.$siteURL.'/'.$imgUserPastaAvatar;
}else{
$avatar = 'src='.$siteURL.'/img/avatar/'.$imgPF.'.jpg';
}
und das Skript zum Senden eines Ajax-Aufrufs an meine Datei, der die Datei-Upload-Anforderung verarbeitet:
$(function () {
var form;
$('#uploadAvatar').change(function (event) {
form = new FormData();
form.append('uploadedAvatar', event.target.files[0]);
});
$("#uploadAvatar").change(function() {
$("#loadingIMG").show();
var imgEditATTR = $("div.imgP").next().attr("src");
var imgEdit = $("div.imgP").next();
$.ajax({
url: 'http://example/test/profileForm.php',
data: form,
processData: false,
contentType: false,
type: 'POST',
success: function (data) {
$("#loadingIMG").hide();
$(imgEdit).attr('src', imgEditATTR + '?' + new Date().getTime());
}
});
});
});
Ich habe versucht, den Browser zu zwingen, das Bild bei Erfolg neu zu laden. Ajax-Aufruf, $(imgEdit).attr('src', imgEditATTR + '?' + new Date().getTime());aber das selectorvon var imgEditund imgEditATTRfunktioniert nicht:
console.log(imgEdit);Ergebnis: w.fn.init [prevObject: w.fn.init(0)] console.log(imgEdit);Ergebnis : undefined;
Warum passiert es und wie kann man es beheben?
Ich weiß, dass es eine Reihe von Fragen zum Neuladen von img gibt, aber bei diesen Fragen gibt es keine Methode zum Neuladen eines Bildes, ohne den Dateinamen zu kennen. Ich habe so viele Fragen geprüft und das sagen die Antworten:
d = new Date();
$("#myimg").attr("src", "/myimg.jpg?"+d.getTime());
In meinem Fall kenne ich den Dateinamen nicht, da er zufällig generiert wird profileForm.phpmit mt_rand():
$ext = explode('.',$_FILES['uploadedIMG']['name']);
$extension = $ext[1];
$newname = mt_rand(10000, 10000000);
$folderPFFetchFILE = $folderPFFetch.'avatar/'.$newname.'_'.time().'.'.$extension;
//example of the result: 9081341_1546973622.jpg
move_uploaded_file($_FILES['uploadedAvatar']['tmp_name'], $folderPFFetchFILE);
Sie können den Dateinamen als Antwort auf Ihre AJAX-Anfrage zurückgeben und ihn im Erfolgsblock verwenden, um das src-Attribut des img-Tags zu aktualisieren
Ihre profileForm.php sieht also ungefähr so aus
$ext = explode('.',$_FILES['uploadedIMG']['name']);
$extension = $ext[1];
$newname = mt_rand(10000, 10000000).'_'.time();
$folderPFFetchFILE = $folderPFFetch.'avatar/'.$newname.'.'.$extension;
//example of the result: 9081341_1546973622.jpg
move_uploaded_file($_FILES['uploadedAvatar']['tmp_name'], $folderPFFetchFILE);
echo $newname // you can also send a JSON object here
// this can be either echo or return depending on how you call the function
und Ihr AJAX-Code wird so aussehen
$.ajax({
url: 'http://example/test/profileForm.php',
data: form,
processData: false,
contentType: false,
type: 'POST',
success: function (data) {
$("#loadingIMG").hide();
$(imgEdit).attr('src', data);
}
});