Firefox 3.6 и, по-видимому, последняя версия Safari (возможно, Webkit по ночам) поддерживают это через HTML5.Я играл с этим недавно, и это работает довольно хорошо.Приведенный мной пример просто вставляет миниатюры на страницу, но это можно настроить для загрузки данных на сервер.Вот код JavaScript / jquery, который я написал, не стесняйтесь использовать это:
function debug(string) {
$("#debugArea").append(string);
}
$(function() {
// We need to override the dragover event, otherwise Firefox will just open the file on drop
$("#dropArea").bind("dragover", function(event) {
event.preventDefault();
});
// This is where the actual magic happens :)
$("#dropArea").bind("drop", function(event) {
event.preventDefault();
debug("Dropped something: ");
// Since jquery returns its own event object, we need to get the original one in order to access the files
var files = event.originalEvent.dataTransfer.files;
// jquery nicely loops for us over the files
$(files).each(function(index, file) {
if(!file.type.match(/image.*/)) { // Skip non-images
debug(file.name)
debug(" <em>not an image, skipping</em>; ");
return;
}
// We need a new filereader for every file, otherwise the reading might be canceled by the next file
var filereader = new FileReader();
filereader.onloadend = function(event) { $("#thumbnails").append("<img src='"+event.target.result+"' width='100px' />"); };
debug(file.name);
debug("; ");
// Read the file in data URL format so that we can easily add it to an img tag.
filereader.readAsDataURL(file);
});
debug("<br/><br/>");
})
});
И HTML-код для него:
<div id="dropArea">
<p>Drop images here!</p>
</div>
<div id="thumbnails">
</div>
<div id="debugArea">
<strong>Debug Info:</strong><br/>
</div>