圖像的混合/雙重文件輸入

我有下面這個javascript代碼，我想爲圖像文件創建一個混合輸入方法：將其刪除並通過文件資源管理器進行選擇。圖像的混合/雙重文件輸入

該下拉工作完美，但如果您嘗試使用文件瀏覽器上載文件，則不會顯示。我認爲是imgLoad()裏面的東西，因爲當我在更改事件中運行它時，無論如何我都沒有加載（即使使用不同的函數調用方法）。

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();

演示在這裏：https://jsfiddle.net/vtsvr4sa/1/

來源

2017-07-18 gAbad

imgLoad不是在JavaScript中的全局定義函數的問題。您還在fileDoor.onchange=imgLoad()處立即致電imgLoad，而不是參考功能fileDoor.onchange=imgLoad。

change事件沒有.dataTransfer屬性。使用OR ||運算符在imgLoad處理程序內處理event.dataTransfer.files或event.target.files。

調整HTML使用<input type="file">元素作爲drop事件目標。設置<input type="file">元素CSS以相同width和height的父元素，opacity到0，並position到absolute，與top設置爲父元素.ingConftop值

<!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>

來源

2017-07-18 08:20:47 guest271314

非常感謝！我應該看到錯誤。謝謝 – gAbad

圖像的混合/雙重文件輸入

回答

相關問題