Gestion des envois de fichiers asynchrones via une iframe et suivi des envois en temps réel via XMLHttpRequest.
L'affichage de l'avancement en temps réel est réalisé avec une image vectorielle SVG uniquement dans le cas où l'extension APC de PHP est installé sur le serveur.
Bien que l'extension du fichier soit vérifiée avant l'envoi du formulaire, il est important que le script qui réceptionne le formulaire revérifie l'extension ainsi que la taille maximale.
Ce module utilise côté serveur l'extension APC de PHP pour afficher en temps réel l'avancement des envois de fichier. Voici la configuration minimale requise :
[APC] apc.enabled = 1 apc.rfc1867 = 1 apc.rfc1867_name = APC_UPLOAD_PROGRESS apc.max_file_size = 10M
Serveur actuel (www.luigifab.info) : l'extension APC n'est pas installée.
Attention : le suivi en temps réel ne fonctionne pas en mode CGI ou FastCGI.
Type d'interface utilisée par le serveur (www.luigifab.info) : cgi-fcgi.
callback si l'envoi du fichier s'est bien passéapijs.upload.sendFile(string title, number maxsize, array extensions, function callback, object params, string data, string icon);callback si la suppression du fichier s'est bien passéeapijs.upload.deleteFile(string title, string text, function callback, object params, string key, string icon);Note that compressed versions of JavaScript files are available in zip folder.
// configuration
var apijs = {
i18n: null,
dialogue: null,
slideshow: null,
upload: null,
config: {
lang: 'fr',
debug: true,
debugkey: false,
navigator: true,
transition: true,
autolang: true,
dialogue: {
blocks: ['header', 'ariane', 'contenu', 'footer'],
hiddenPage: false,
savingDialog: false,
savingTime: 700,
emotes: true,
showLoader: true,
showFullsize: false,
savePhoto: true,
saveVideo: true,
videoAutoplay: true,
videoWidth: 640,
videoHeight: 480,
imagePrev: null,
imageNext: null,
imageClose: null,
imageUpload: { src: './images/dialogue/progressbar.svg.php', width: 300, height: 17 },
filePhoto: null,
fileVideo: null,
fileUpload: './uploadfile.php'
}
}
};
// start-up
if (navigator.userAgent.indexOf('MSIE 8') > -1) {
apijs.config.navigator = false;
apijs.config.transition = false;
document.createElement('video');
window.innerWidth = document.documentElement.clientWidth;
window.innerHeight = document.documentElement.clientHeight;
window.attachEvent('onload', start);
}
else {
window.addEventListener('load', start, false);
}
function start() {
if ((typeof document.getElementsByTagName('body')[0].style.transitionDuration !== 'string') &&
(typeof document.getElementsByTagName('body')[0].style.MozTransitionDuration !== 'string') &&
(typeof document.getElementsByTagName('body')[0].style.webkitTransitionDuration !== 'string')) {
apijs.config.transition = false;
}
if ((typeof Internationalization === 'function') && (typeof BBcode === 'function') &&
(typeof Dialogue === 'function') && (typeof Upload === 'function')) {
apijs.i18n = new Internationalization();
apijs.i18n.init();
apijs.dialogue = new Dialogue();
apijs.upload = new Upload();
}
};
Ce module (TheUpload) utilise les dialogues d'upload, de progression et d'information de TheDialogue.
Par défaut, le paramètre icon peut prendre les valeurs suivantes : delete, download, error, print et warning.
Les icônes sont définies dans le fichier dialogue.css. Il est donc possible d'en ajouter facilement, ici ou ailleurs.
Le paramètre data correspond au nom du champ fichier du formulaire.
Le paramètre maxsize indique la taille maximale autorisée en Mégaoctet (à titre d'information uniquement).
Le paramètre extensions peut prendre les valeurs suivantes :
- ['*'] pour tous les fichiers,
- ['png'] pour les fichiers png uniquement,
- ['png','pdf'] pour les fichiers png et pdf uniquement.
Les id suivants ne peuvent pas être utilisés car ils sont utilisés par le programme JavaScript : dialogue, box, iframeUpload, progressbar, topho, prev, next.
La capture des touches du clavier est réalisée via eventListener sur keydown.
Le pré-chargement de l'image du dialogue photo est réalisé via eventListener sur load.
Toutes les actions ou presque des boutons de dialogue sont déclenchées via onclick.
Seul la validation des dialogues composés d'un formulaire se fait via onsubmit.
TheUpload depends on TheDialogue and i18n.
TheDialogue also depends on bbcode.