Caputo's blog

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy

Upload file con trascinamento con javascript e Ajax

Ottobre 5th, 2010 by Giovanni Caputo

E’ possibile evitare di utilizzare il bottone “sfoglia” che consente di selezionare il file prima di accettarne il caricamento,  per effettuare l’upload di un file sul proprio sito , ma è possibile utilizzare un trascinamento del file all’interno del browser nel classico stile drag & drop.

E’ necessario però che il browser supporti l’HTML 5, tra i qualiso Mozzilla Firefox.

Dunque costruiamo un file html semplice che contiene i riferimenti a jquery e al file upload-trascinamento.js che andremo a riempire successivamente:


<html>
<head>
<title>Prova di upload per trascinamento</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="upload-trascinamento.js"></script>
</head>
<body>
<div style="margin:0 auto; text-align:center">
<h1 style="margin-top:100px;">Upload (di 1 file alla volta) per trascinamento</h1>
<h2 id="stato"></h2>
</div>
</body>
</html>

Ed ecco il file upload-trascinamento.js :


$(document).ready(function() {
$(this)
.bind("dragenter", function(event) {
return false;
})


.bind("dragover", function(event) {
return false;
})


.bind("drop", function(event) {
var file = event.originalEvent.dataTransfer.files[0];
event.stopPropagation();
$("#stato").html("Caricamento del file in corso. Attendere prego....");


$.ajax({
url:'upload.php',
async:true,
type:'POST',
contentType:'multipart/form-data',
processData:false,
data:file,
success: function(data) {
$("#stato").html("Il file <a href=\""+ data + "\">" + data + "</a> e\' stato copiato sul server<br/><br/>");
} ,
beforeSend: function(xhr) {
xhr.setRequestHeader("X-File-Name", file.name);
xhr.setRequestHeader("Cache-Control", "no-cache");
}
});
});
});

L’ultimo passo per completare il lavoro è è la costruzione del ricevente della chiamata ajax, ovvero il file upload.php:


<?php
$headers = getallheaders();
$nomefile = basename($headers['X-File-Name']);
$streamdati = file_get_contents("php://input");
file_put_contents($nomefile, $streamdati);
echo $nomefile;
?>

Lo script estrae il nome del file dall’header X-File-Name, legge il flusso di dati  (i byte del file) attraverso lo stream di input (php://input) passato alla funzione file_get_contents e costruisce nella directory corrente del server un nuovo file con il nome e i byte del file trasmesso.

Questo post è stato postato martedì, Ottobre 5th, 2010 at 22:26 nella categoria Programmazione. Tags:, .
Puoi seguire tutti i commenti di questo articolo attraverso RSS 2.0 feed. Puoi lasciare un commento, o trackback dal nostro sito.

Lascia un commento

You must be loggati to post a comment.