ReadAsDataURL（）不起作用

我試圖在我的網站中實現拖放功能。我需要將丟棄的圖像轉換爲數據URI，以便我可以將其與JCrop一起使用並上傳。ReadAsDataURL（）不起作用

  drop: function (e) { 
       e = e || window.event; 
       e.preventDefault(); 
       e = e.originalEvent || e;   
       var files = (e.files || e.dataTransfer.files); 
       var reader = new FileReader(); 
       reader.onload = function (event){ 
        console.log(event.target.result); 
       }; 
       reader.readAsDataURL(files); 
       return false; 
      }

但是在控制檯沒有顯示出來。甚至沒有undefined。變量files返回一個Object FileList與我丟棄的圖像，所以問題不在那裏。我怎樣才能解決這個問題？ :(

來源

2013-11-02 Erman

你可以創建一個問題一個小提琴？ – Ronny

//applies to only one file. 
reader.readAsDataURL(files);

解決方案：

for(var i=0;i<files.length;i++){ 
    reader.readAsDataURL(files[i]); 
}

來源

2013-11-02 09:36:19 Romko

非常感謝你，當我把報價換成分號:)時，它就能正常工作:) – Erman

這只是一個錯誤類型。一點也不） – Romko

你可以試試這個

HTML

<div id="dropBox"> 
<div>Drop your image here...</div> 
</div>

CSS

#dropBox { 
    margin: 15px; 
    width: 300px; 
    height: 300px; 
    border: 5px dashed gray; 
    border-radius: 8px; 
    background: lightyellow; 
    background-size: 100%; 
    background-repeat: no-repeat; 
    text-align: center; 
    } 

#dropBox div { 
    margin: 100px 70px; 
    color: orange; 
    font-size: 25px; 
    font-family: Verdana, Arial, sans-serif; 
    }

的JavaScript

var dropBox ; 

window.onload = function() 
{ 
dropBox = document.getElementById("dropBox"); 
dropBox.ondrop = drop; 
}; 

function drop(e) 
{ 
    // Get the dragged-in files. 
    var data = e.dataTransfer; 
    var files = data.files; 

// Pass them to the file-processing function. 
    processFiles(files); 
} 

function processFiles(files) 
{ 
    var file = files[0]; 

// Create the FileReader. 
var reader = new FileReader(); 

// Tell it what to do when the data URL is ready. 
    reader.onload = function (e) 
    { 
    // Use the image URL to paint the drop box background 
    dropBox.style.backgroundImage = "url('" + e.target.result + "')"; 
    }; 

// Start reading the image. 
reader.readAsDataURL(file); 
}

來源

2013-11-02 09:47:12 Prateek

ReadAsDataURL（）不起作用

回答

相關問題