Dakle ovako, želio bih napraviti drag and drop sistem uploadanja fajlova na svojoj stranici koristeći html5 i js - vrlo slično izgleda kao ovo na bol forumu za dodavanje slika. Uspio sam srediti dropanje fajlova i njihovo listanje. Problem je u tome da ne mogu dobiti full path dropanih fajlova (samo filename) koji bi kasnije mogao koristiti za spremanje na server (taj path bi stavio u neki element na stranicu i kasnie pobrao u aspx.cs u fileupload kontrolu), a neznam kako drugačije spremiti. U mozillinoj dokumentaciji ima mogućnost dobivanja full patha koristeći mozFullPath, ali mislim da to samo u firefoxu radi (ako radi). Naravno da mogu uploadanje rješiti na puno jednostavnije načine iz samog .neta, ali želim srediti ovo dropanje više fajlova odjednom kako spada. Također znam da postoje jQuery, Ajax i druge alternative, ali ovo mi se nekako čini najzgodnijim jer je sve nativno i radi svugdje gdje ima html5, bez ikakvih dodanih library-a.
Inače koristim aspx c# u izradi stranice, koji je prilično ograničen što se file uploada tiče (ako ne želim koristiti neke custom kontrole za to ili si dati truda pa napraviti vlastitu).
Eto, pomoć bi bila poželjna. Ima li tko ideju kako dobiti path svake slike u ovoj for petlji ili možda zna neki bolji način drag and dropanja?
Idealno bi bilo kada bi mogao dobiti ovo što se koristi tu na forumu. Naravno, ako to nije problem.
U attachmentu je slika kako to moje izgleda za sada, nakon što se par fajlova dropa (i slika se prikaže kao thumbnail)
<div id="drop_zonei" class="drop_zone">Drop files here</div>
<div class="list"><output id="listi">Selected files: none</output></div>
<script type="text/javascript">
function handleFileSelect(evt)
{
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files; // FileList object.
// files is a FileList of File objects. List some properties.
var output = [];
for (var i = 0, f; f = files[i]; i++) {
output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ', f.size / 1024, ' KB</li>');
}
document.getElementById('listi').innerHTML = 'Selected files:<ul>' + output.join('') + '</ul>';
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++)
{
// Only process image files.
if (f.type.match('image.*')) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function (theFile) {
return function (e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" width="128px" height="128px" src="', e.target.result, '" title="', theFile.name, '"/>'].join('');
document.getElementById('listi').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
}
function handleDragOver(evt)
{
evt.stopPropagation();
evt.preventDefault();
}
// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zonei');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
dropZone.addEventListener('change', handleFileSelect, false);
</script>
