ReadAsDataURL() не работает

Я пытался реализовать функцию Drag n 'Drop на своем веб-сайте. Мне нужно преобразовать перетащенное изображение в URI данных, чтобы я мог использовать его с JCrop и загрузить его позже.

            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 с изображением, которое я сбросил, так что проблема не в этом. Как я могу это исправить? :(


javascript html jquery fileapi
person Duncan    schedule 02.11.2013    source источник
comment
Можете ли вы создать скрипку с проблемой?   -  person Ronny    schedule 02.11.2013

Ответы (2)


arrow_upward
2
arrow_downward 

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

решение:

for(var i=0;i<files.length;i++){
   reader.readAsDataURL(files[i]);
}
person Romko    schedule 02.11.2013
comment
СПАСИБО БОЛЬШОЕ, работает когда цитату заменяю точкой с запятой :) - person Duncan; 02.11.2013
comment
это была просто опечатка. нисколько) - person Romko; 02.11.2013

arrow_upward
1
arrow_downward

Вы можете попробовать это

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);
}
person Prateek    schedule 02.11.2013