Comment télécharger des fichiers utilisant Ajax et PHP

Comment télécharger des fichiers utilisant Ajax et PHP


Même si un fichier est en cours téléchargé sur un site Web en utilisant HTML et PHP, la page Web ne peut pas actualiser jusqu'à ce que le téléchargement est terminé. Cela pourrait prendre un certain temps, surtout si elle est un grand fichier. Un développeur Web peut éviter cela en utilisant AJAX (Asynchronous JavaScript and XML) techniques pour permettre à l'utilisateur de continuer à utiliser la page Web alors que le téléchargement de fichiers est en cours.

Instructions

Asynchronous Upload

1 Créer un document texte en blanc sur le bureau de votre ordinateur et le renommer "filesave.php." Copiez et collez le code ci-dessous dans "filesave.php," puis sélectionnez "Fichier | Enregistrer." Ce script PHP va recevoir le fichier à partir d'un formulaire HTML et sauvegarde dans le répertoire courant sur le serveur Web.

<? Php

$ Upload_result = 0;

$ Target_folder = "./";

$ TARGET_PATH = $ target_folder.basename ($ _FILES [ 'uploadfile'] [ 'name']);

if (@move_uploaded_file ($ _ FILES [ 'uploadfile'] [ 'tmp_name'], $ TARGET_PATH)) {

$upload_result = 1;

}

?>

2 Créer un document texte en blanc sur le bureau de votre ordinateur et le renommer "fileupload.html." Ouvrir "fileupload.html" dans le Bloc-notes, puis copiez et collez le code suivant. Change "yoursite.com" à votre domaine de site Web. Ce code utilise la technique asynchrone de "enfermer" la réponse filesave.php à l'intérieur du iframe "iframe_target," afin que le site n'a pas besoin de rafraîchir.

<Html>

<Head>

</ Head>

<Body>

<Div id = "upload_status"> </ div>

<Form action = "http://www.yoursite.com/filesave.php" method = "post" enctype = "multipart / form-data" target = 'iframe_target'>

S'il vous plaît entrer un nom de fichier:

<Input name = "uploadfile" type = "file" />

<Input type = "submit" value = "Upload" />

</ Form>

<Name = le style iframe id = "upload_target" "de iframe_target" = "width: 0; hauteur: 0"> </ iframe>

</ Body>

</ Html>

3 Upload "filesave.php" et "fileupload.php" dans le répertoire racine de votre site, en utilisant un logiciel FTP.

4 Ouvrez votre navigateur à "http://www.yoursite.com/fileupload.html" où "yoursite.com" est votre site web nom de domaine. Cliquez sur "Parcourir ..." et sélectionnez un fichier volumineux tel qu'un fichier image de l'échantillon, puis cliquez sur "télécharger". Le téléchargement se terminer lorsque le navigateur affiche "Done" en bas de la fenêtre. Vérifiez que le fichier a téléchargé avec succès, en utilisant votre logiciel FTP.

Utilisation de DOM (modèle objet de document) pour afficher un message d'état

5 Copiez et collez le code suivant au-dessus du "</ head>" balise de fin dans "fileupload.html" sur votre bureau. La fonction "begin_upload" utilise l'élément de document "upload_status" pour afficher le "chargement ..." message. La fonction "end_upload" sera appelé par la réponse PHP après qu'il a enregistré avec succès le fichier téléchargé.

<Script>

fonction begin_upload () {

document.getElementById ( 'upload_status') innerHTML = 'de chargement ...'.;

return true;

}

fonction end_upload (résultat) {

if (result == 1){

. Document.getElementById ( 'de upload_status') innerHTML = "Le fichier a été téléchargé avec succès.";

} autre {

. Document.getElementById ( 'de upload_status') innerHTML = "Une erreur est survenue lors du téléchargement.";

}

return true;

}

</ Script>

6 Insérez la chaîne "onSubmit = 'begin_upload ();'" après la chaîne "target = 'iframe_target'" à l'intérieur de la "form action" tag, de sorte que la balise entière apparaît comme ci-dessous. Cela permet à la "(begin_upload)" fonction à appeler lorsque l'utilisateur clique sur le bouton "télécharger". Sélectionnez "Fichier | Enregistrer".

<Form action = "http://www.yoursite.com/filesave.php" method = "post" enctype = cible "multipart / form-data" = 'iframe_target' onSubmit = 'begin_upload ();' >

7 Appuyez sur "Alt + TAB" pour sélectionner "filesave.php" dans le Bloc-notes. Copiez et collez les deux lignes suivantes en haut avant la ligne "<? Php", de sorte que le script PHP utilise une fonction de script JavaScript appelé "init ()."

<Script type = "text / javascript">

fonction init () {

8 Copiez et collez les lignes suivantes en dessous de la ligne de fond "?>," De sorte que le script PHP génère le fichier enregistré valeur de résultat dans le "init ()" fonction. Sélectionnez "Fichier | Enregistrer".

(<? Php echo $ upload_result?;>) Top.end_upload;

}

window.onload = initialisation;

</ Script>

9 Upload "filesave.php" et "fileupload.html" à votre site Web, en écrasant les versions précédentes.

dix Ouvrez votre navigateur à "http://www.yoursite.com/fileupload.html" où "yoursite.com" est votre site web nom de domaine. Cliquez sur "Parcourir ..." et sélectionnez un grand fichier, puis cliquez sur "télécharger". Le "chargement ..." message sera maintenant afficher pendant le téléchargement, et à la fin, le message "téléchargé avec succès" affiche.