jQuery: upload file + php

Siamo oggi di fronte all’annosa questione: come fare l’apload di un file usando un sisstema un po’ moderno e intelligente ma facilemente integrabile nei binari gà noti della programmazione php.

La soluzione proporsta prevede l’uso del celebre plugin di jQuery uploadify

Da questo sito scaricheremo i files che ci servono dalla pagina di download, ovvero il plugin, il suo css, un file swf per la realizzazione della prgogress bar e, già che ci siamo, il file php per spostare il file nella cartella di destinazione finale. Il nostro scopo sarà consentire all’utente la scelta e l’upload del file prima e indipendetemente dall’invio del form, gestiremo la risposta per sapere il nome del file caricato.

Partiamo quindi dalle intestazioni del file html:

<link rel="stylesheet" type="text/css" href="uploadify.css" />
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="js/jquery.uploadify.min.js"></script>

Proseguiamo con il form:

<form>
<fieldset>
<legend>File upload</legend>
<label for="file_upload_1">File</label><br>
<input type="hidden" id="file_upload" name="file_upload">
<input type="file" id="file_upload_1" name="file_upload_1"><br><br>
<input type="submit">
</fieldset>
</form>

Useremo il campo nascosto per memorizzare il nome del file così come verrà salvato.

Per attivare il controllo sull’input file procederemo in questo modo:

$(function() {
$("#file_upload_1").uploadify({
height        : 30,
swf           : 'uploadify.swf',
uploader      : 'uploadify.php',
width         : 120,
onUploadSuccess : function(file, data, response) {$('#file_upload').val(data);}
});
});

La maggiorn parte delle informazioni dovrebbero essere evidenti, la parte forse pià interessante è l’onUploadSuccess che scrive nell’input hidden, per il resto sono i percorsi dei due file scaricati.

Per quanto rigarda il file php, il codice è il seguene e l’unica personalizzazione riguarda il path di destinazione dei files, poi lo si potrà personalizzare e integrare con gli opportuni controlli come meglio si crede:

$targetFolder = '/blog/tutorial/upload'; // Relative to the root
if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$targetPath = $_SERVER['DOCUMENT_ROOT'] . $targetFolder;
$targetFile = rtrim($targetPath,'/') . '/' . $_FILES['Filedata']['name'];

// Validate the file type
$fileTypes = array('jpg','jpeg','gif','png'); // File extensions
$fileParts = pathinfo($_FILES['Filedata']['name']);

if (in_array($fileParts['extension'],$fileTypes)) {
move_uploaded_file($tempFile,$targetFile);
echo $_FILES['Filedata']['name'];
} else {
echo 'Invalid file type.';
}
}

L’esempio