Показать изображение после перетаскивания на странице html

Question

Я реализую управление перетаскиванием изображений с помощью JQuery/JS. Что было сделано, так это то, что пользователь перетаскивает некоторый файл изображения и перетаскивается в html-страницу. После удаления файла я показываю только имя файла и его размер.

Что мне нужно для отображения изображения на странице. Но я не могу получить содержимое файла изображения в jquery.

Ниже код, который я написал:

function handleFileUpload(files, obj) { 
for (var i = 0; i < files.length; i++) { 
    var fd = new FormData(); 
    fd.append('file', files[i]); 

    var status = new createStatusbar(obj); //Using this we can set progress. 
    status.setFileNameSize(files[i].name, files[i].size); 
    sendFileToServer(fd, status); 

} 
} 
$(document).ready(function() { 
var obj = $("#dragandrophandler"); 
obj.on('dragenter', function (e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    $(this).css('border', '2px solid #0B85A1'); 
}); 
obj.on('dragover', function (e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
}); 
obj.on('drop', function (e) { 

    $(this).css('border', '2px dotted #0B85A1'); 
    e.preventDefault(); 
    var files = e.originalEvent.dataTransfer.files; 

    //We need to send dropped files to Server 
    handleFileUpload(files, obj); 
}); 
$(document).on('dragenter', function (e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
}); 
$(document).on('dragover', function (e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
    obj.css('border', '2px dotted #0B85A1'); 
}); 
$(document).on('drop', function (e) { 
    e.stopPropagation(); 
    e.preventDefault(); 
}); 

}); 

На функции отладки handleFileUpload, он только отображает следующие атрибуты:

Можете ли вы помочь в этом вопросе?

Благодаря

Answer 1

Итак, вот как я решил проблему :

function handleFileUpload(files, obj) { 
for (var i = 0; i < files.length; i++) { 
    var fd = new FormData(); 
    fd.append('file', files[i]); 
    var status = new createStatusbar(obj); //Using this we can set progress. 
    //status.setFileNameSize(files[i].name, files[i].size); 
    //sendFileToServer(fd, status); 

    var list = document.getElementById("image-list"); 
    var cell = document.createElement("td"); 
    var img = document.createElement("img"); 
    img.classList.add("obj"); 
    img.file = files[i]; 
    cell.setAttribute("align", "center"); 
    cell.setAttribute("valign", "bottom"); 
    cell.appendChild(img); 
    list.appendChild(cell); 

    var reader = new FileReader(); 
    reader.onload = (function (aImg) { return function (e) { aImg.src = e.target.result; }; })(img); 
    reader.readAsDataURL(files[i]); 
} 
} 

Answer 2

Я не пробовал, но вы делаете использование HTML5 File API. Ваше изображение представляет собой экземпляр класса File, который сам является подклассом Blob. С помощью FileReader вы можете получить доступ к содержимому файла. Эта статья более в связи MDN к другой статье в сети, в которой показано, как использовать его: Showing thumbnails of User-selected images

В принципе, вы получить доступ к содержимому, как так:

function handleFileUpload(files, obj) { 
    for(var i = 0; i < files.length; i++) { 
     // ... your other code 
     var reader = new FileReader(); 
     reader.onload = function(){ 
      // Should look like data:,<jibberish_data> based on which method you called 
      console.log(e.target.result); 
     }; 
     reader.readAsDataURL(files[i]); 
    } 
}