Hybride/doppelte Dateieingabe für Bild

Ich habe diesen Javascript-Code unten, wo ich eine hybride Eingabemethode für eine Bilddatei machen möchte: das Löschen und Auswählen durch den Dateiexplorer.Hybride/doppelte Dateieingabe für Bild

Der Tropfen funktioniert perfekt, aber wenn Sie versuchen, eine Datei mit dem Datei-Explorer hochladen, wird es nicht angezeigt. Ich denke, ist etwas in imgLoad() weil nicht geladen wird, wenn ich es im Change-Event ausführen, egal wie ich putted (auch mit anderen Funktionsaufruf Methoden).

var obje=document.getElementById('toDrop'); 
var fileDoor=document.getElementById('fileImg'); 
obje.ondragover=function(ev) { ev.preventDefault();} 
obje.ondrop=function imgLoad(eve) { 
    eve.preventDefault(); 
    var fil=new FileReader(); 
    fil.onload=function(ev) { document.getElementById('toDrop').style.backgroundImage="url('"+ev.target.result+"')"; 
} 
    fil.readAsDataURL(eve.dataTransfer.files[0]); 
    } 
    fileDoor.onchange=imgLoad();

Demo hier: https://jsfiddle.net/vtsvr4sa/1/

Quelle

2017-07-18 gAbad

imgLoad ist kein global definierte Funktion in Javascript in Frage. Sie rufen auch imgLoad sofort unter fileDoor.onchange=imgLoad() an, anstatt auf die Funktion fileDoor.onchange=imgLoad zu verweisen.

change Ereignis hat keine .dataTransfer Eigenschaft. Behandeln Sie beide event.dataTransfer.files oder event.target.files innerhalb imgLoad Handler mit OR || Betreiber.

HTML anpassen, um <input type="file"> Element als drop Ereignisziel zu verwenden. Stellen Sie <input type="file"> Element CSS auf gleiche width und height als übergeordnetes Element, opacity-0 und position zu absolute, mit top Satz zu übergeordnetes Element .ingConftop Wert

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <style> 
 
.imgConf { 
 
    height: 150px; 
 
    width: 150px; 
 
    border-radius: 100%; 
 
    margin: 20px; 
 
    background-size: 100% 100%; 
 
    text-align: center; 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
} 
 

 
.imgConf>label { 
 
    font-size: 15px; 
 
    background-color: rgba(255, 250, 205, 0.5); 
 
    margin-top: 40%; 
 
    width: 80px; 
 
    border-radius: 3px; 
 
} 
 

 
.imgConf input { 
 
    top: 0; 
 
    opacity: 0; 
 
    width: 150px; 
 
    height: 150px; 
 
    display: block; 
 
    position: absolute; 
 
} 
 
    </style> 
 
</head> 
 

 
<body> 
 
    <div class='imgConf' id='toDrop'> 
 
Click or drop image here 
 
<input type="file" accept="image/*" id='fileImg' name="profilePh"> 
 
    </div> 
 
    <script> 
 
var obje = document.getElementById('toDrop'); 
 
var fileDoor = document.getElementById('fileImg'); 
 

 
function imgLoad(eve) { 
 
    var fil = new FileReader(); 
 
    fil.onload = function(ev) { 
 
    obje.style.backgroundImage = `url(${ev.target.result})`; 
 
    } 
 
    fil.readAsDataURL(eve.target.files[0] || eve.dataTransfer.files[0]); 
 
} 
 
fileDoor.onchange = imgLoad; 
 
fileDoor.ondrop = imgLoad; 
 
fileDoor.ondragover = function(e) { 
 
    e.preventDefault() 
 
} 
 
    </script> 
 
</body> 
 

 
</html>

Quelle

2017-07-18 08:20:47 guest271314

Vielen Dank! Ich hätte den Fehler sehen sollen. Vielen Dank – gAbad

Hybride/doppelte Dateieingabe für Bild

Antwort

Verwandte Themen