Tout d'abord, bien sûr, vous devez créer un élément qui "attrapera" le fichier. De plus, nous allons mettre une balise span dans cet élément pour afficher les messages d'état de chargement et saisir avec type dossier, afin de ne pas limiter la sélection de fichiers au glisser-déposer, mais aussi de permettre aux utilisateurs de sélectionner un fichier en cliquant sur cette zone désignée. La forme finale d'une telle structure est présentée ci-dessous.

CSS pour ça HTML le code est banal, sauf pour la conception du champ saisir:

#fichier( largeur :100 % ; hauteur : 100 % ; affichage : bloc ; position : absolue ; haut : 0 ; gauche : 0 ; opacité : 0,01 ; )

Nous décrivons également deux classes qui, lorsqu'elles sont ajoutées à la zone de « capture » ​​du fichier, signaleront un téléchargement de fichier réussi ou une erreur, le cas échéant :

#drop-zone.success( background-color:#2ecc71; ) #drop-zone.error( background-color:#e74c3c; )

Nous pouvons maintenant passer à l'écriture de "l'action" de notre page. Commençons par écrire dans les variables les références aux objets auxquels nous accéderons assez souvent :

Var dropZone = document.getElementById("drop-zone"); var msgConteiner = document.querySelector("#drop-zone .text");

Après cela, nous nous débarrasserons des événements par défaut lorsque le curseur entrera dans notre zone de réception de fichier comme suit :

Var eventClear = function (e) ( e.stopPropagation(); e.preventDefault(); ) dropZone.addEventListener("dragenter", eventClear, false); dropZone.addEventListener("dragover", eventClear, false);

DropZone.addEventListener("drop", function (e) ( if(!e.dataTransfer.files) return; e.stopPropagation(); e.preventDefault(); sendFile(e.dataTransfer.files); ), false); document.getElementById("file").addEventListener("change", function (e) ( sendFile(e.target.files); ), false);

Dans les deux cas, l'événement se termine par un appel de fonction envoyer le fichier, vers lequel le fichier reçu de l'utilisateur est transféré.

Cette fonction est responsable du transfert du fichier vers le serveur. Vous pouvez voir sa description ci-dessous.

Var sendFile = function(file) ( // supprime les classes d'état qui peuvent avoir été ajoutées // si l'utilisateur a déjà essayé de charger quelque chose dropZone.classList.remove("success"); dropZone.classList.remove("error") ; / / vérifie les expressions régulières pour le type de fichier // (dans l'exemple, seules les images peuvent être téléchargées) var re = /(.jpg|.jpeg|.bmp|.gif|.png)$/i; if (!re. exec(file.name)) ( msgConteiner.innerHTML = "Format de fichier invalide!"; dropZone.classList.remove("success"); dropZone.classList.add("error"); ) else ( var fd = new FormData( ); // crée un objet de formulaire fd.append("upfile", file); // ajoute un fichier pour soumettre le formulaire var xhr = new XMLHttpRequest(); xhr.open("POST", "./upload .php", true ); xhr.upload.onprogress = showProgress; xhr.onreadystatechange = statChange; xhr.send(fd); // envoyer au serveur ) )

Comme vous l'avez peut-être remarqué, avant d'envoyer des données au serveur, deux événements sont également définis, dont le premier est chargé d'afficher la progression du téléchargement et le second de notifier le résultat du téléchargement. Ils fonctionnent comme suit :

Var showProgress = function(e) ( if (e.lengthComputable) ( // calcule le pourcentage de chargement var percent = Math.floor((e.loaded / e.total) * 100); // affiche le pourcentage actuel msgConteiner. innerHTML = " Chargement... ("+ pourcentage +"%)"; ) ); var statChange = function (e) ( if (e.target.readyState == 4) ( // à la fin du traitement de la requête au serveur if (e.target.status == 200) ( // si la requête a réussi msgConteiner.innerHTML = "Téléchargement terminé avec succès !" ; dropZone.classList.remove("error"); dropZone.classList.add("success"); document.getElementById("showUpFile").innerHTML = this.responseText; ) else ( // sinon msgConteiner.innerHTML = "Une erreur s'est produite !"; dropZone.classList.remove("success"); dropZone.classList.add("error"); ) ) )

La dernière étape sera le traitement des données reçues par le serveur.

Nous continuons à créer notre glisser déposer télécharger, et aujourd'hui nous allons écrire notre serveur et commencer à écrire Javascript le code.

Dans le dernier article, nous avons écrit index.html fichier et les styles correspondants. Aujourd'hui, nous allons écrire un serveur qui téléchargera des fichiers et enverra des informations à leur sujet au script, mais d'abord, parlons de ce que sera notre structure de fichiers :

• .htaccess
• index.html
• style.css
• télécharger.php
• téléchargements

Avec fichiers index.html et style.css tout est clair. Dans le fichier .htaccess nous avons juste l'encodage écrit pour qu'il n'y ait pas de problèmes.

AddDefaultCharset UTF-8

Dossier télécharger.php téléchargera les fichiers sur le serveur dans un dossier téléchargements.

Alors commençons par php. Pour cela, ouvrez le fichier télécharger.php et écrivez ce qui suit :

header("Content-Type: application/json");

$uploadé = tableau();

Si(!empty($_FILES["fichier"]["nom"])) (
foreach($_FILES["fichier"]["nom"] as $position => $nom) (
if(move_uploaded_file($_FILES["file"]["tmp_name"][$position], "uploads/".$name)) (
$téléchargé = tableau(
"nom" => $nom,
"file" => "uploads/".$nom
);
}
}
}

echo json_encode($uploadé);
?>

Au début du fichier, nous écrivons l'en-tête type de contenu pour dire au navigateur ce qu'il obtiendra json. Ensuite, nous créons un tableau vide $téléchargé et vérifiez s'il y a des fichiers. Si oui, parcourez-les et téléchargez-les dans notre répertoire téléchargements, et remplissez également notre tableau principal $téléchargé sous-tableaux qui contiendront des informations sur les fichiers. Dans notre cas, cela Nom de fichier et son emplacement. Enfin, nous transformons notre tableau en json et sortez-le. Comme vous pouvez le voir, le serveur n'est pas compliqué du tout.

Passons maintenant au dossier. index.html

Rappelez-vous la classe .trainer, que nous avons écrit dans le dernier article, et j'ai dit qu'il sera appliqué lorsqu'il y aura un fichier au-dessus de notre bloc ? C'est exactement ce que nous avons fait maintenant. Lorsqu'un fichier apparaît au-dessus du bloc, l'événement se déclenche ondragover où nous ajoutons simplement notre classe .trainer et changez le texte en "Lâcher la souris". Lorsque nous déplaçons la souris avec le fichier loin de notre bloc, l'événement se déclenche ondragleave, où nous remettons tout dans sa position d'origine. Lorsqu'une personne « jette » un fichier dans notre bloc, l'événement se déclenche goutte. Là on change tout à nouveau, comme c'était au début, sinon notre classe va "se bloquer" .trainer et remplacer le comportement par défaut. Si nous ne le faisons pas, notre fichier s'ouvrira simplement dans le navigateur, dont nous n'avons pas besoin.

Grâce aux innovations du HTML5, créez Faites glisser et Les interfaces de dépôt sont devenues beaucoup plus faciles. Malheureusement, ces innovations ne disposent pas encore d'une prise en charge étendue des navigateurs, mais j'espère que cela changera bientôt (pour ce moment fonctionne dans Firefox 4+, Chrome et Opera 11.10).

balisage

Je dois dire tout de suite que l'article s'adresse plus aux débutants qu'aux professionnels. Par conséquent, certains points seront décrits en détail.

Tout d'abord, nous devons créer un fichier HTML avec le contenu suivant :

Pour télécharger, faites glisser le fichier ici.

Tout notre travail sera fait avec le conteneur dropZone. Ajoutons maintenant des styles à notre document (style.css) :

Corps ( police : 12px Arial, sans-serif; ) #dropZone ( couleur : #555 ; font-size : 18px ; text-align : center ; width : 400px ; padding : 50px 0 ; margin : 50px auto ; background : #eee ; border : 1px solide #ccc ; -webkit-border-radius : 5px ; -moz-border-radius : 5px ; border-radius : 5px ; ) #dropZone.hover ( fond : #ddd ; border-color : #aaa ; ) #dropZone.error ( arrière-plan : #faa; border-color : #f00; ) #dropZone.drop ( arrière-plan : #afa; border-color : #0f0; )

Dans les styles, vous pouvez remarquer trois états pour l'élément dropZone : au survol, si une erreur se produit et en cas de succès.

Télécharger le scénario

Nous allons maintenant passer à la partie amusante - écrire du code JavaScript. Premièrement, nous devons créer des variables, dans l'une desquelles nous placerons notre dropZone, et dans la seconde nous spécifierons la taille maximale du fichier.

$(document).ready(function() ( var dropZone = $("#dropZone"), maxFileSize = 1000000; // la taille maximale du fichier est de 1 Mo. ));

Ensuite, nous devons vérifier si le navigateur prend en charge le glisser-déposer, pour cela nous utiliserons la fonction FileReader. Si le navigateur ne prend pas en charge le glisser-déposer, nous écrirons alors à l'intérieur de l'élément dropZone "Non pris en charge par le navigateur!" et ajoutez la classe "error".

Si (typeof(window.FileReader) == "undefined") ( dropZone.text("Non supporté par le navigateur!"); dropZone.addClass("error"); )

La prochaine chose que nous allons faire est d'animer l'effet de faire glisser un fichier sur la dropZone. Nous suivrons ces actions à l'aide des événements "ondragover" et "ondragleave". Mais comme ces événements ne peuvent pas être suivis sur l'objet jQuery, nous devons accéder non seulement à "dropZone", mais à "dropZone".

DropZone.ondragover = function() ( dropZone.addClass("hover"); return false; ); dropZone.ondragleave = function() ( dropZone.removeClass("hover"); return false; );

Nous devons maintenant écrire le gestionnaire d'événements "ondrop" - c'est l'événement lorsque le fichier glissé est déposé. Dans certains navigateurs, lorsque vous faites glisser des fichiers dans la fenêtre du navigateur, ils s'ouvrent automatiquement, pour que cela ne se produise pas, nous devons annuler le comportement standard du navigateur. Nous devons également supprimer la classe "hover" et ajouter la classe "drop".

DropZone.ondrop = fonction (événement) ( event.preventDefault(); dropZone.removeClass("hover"); dropZone.addClass("drop"); );

varfile = event.dataTransfer.files ; if (file.size > maxFileSize) ( dropZone.text("Le fichier est trop gros!"); dropZone.addClass("error"); return false; )

Nous devons maintenant écrire une requête AJAX qui envoie notre fichier au gestionnaire. Pour créer une requête AJAX, nous allons utiliser l'objet XMLHttpRequest. Ajoutons deux gestionnaires d'événements pour l'objet XMLHttpRequest : l'un affichera la progression du téléchargement du fichier et le second affichera le résultat du téléchargement. Nous allons spécifier le fichier upload.php comme gestionnaire.

varxhr = new XMLHttpRequest(); xhr.upload.addEventListener("progress", uploadProgress, false); xhr.onreadystatechange = changement d'état ; xhr.open("POST", "/upload.php"); xhr.setRequestHeader("X-FILE-NAME", file.name); xhr.send(fichier);

Passons maintenant aux fonctions de progression du téléchargement et de résultat du téléchargement. Il n'y a rien de compliqué dans la fonction "uploadProgress", juste des calculs simples.

Fonction uploadProgress(event) ( var percent = parseInt(event.loaded / event.total * 100); dropZone.text("Loading: " + percent + "%"); )

Dans la fonction "stateChange", nous devons vérifier si le processus de chargement est terminé, et si c'est le cas, nous devons vérifier si une erreur s'est produite. Le code de requête réussi est "200", si le code est différent de celui-ci, cela signifie qu'une erreur s'est produite.

Fonction stateChange(event) ( if (event.target.readyState == 4) ( if (event.target.status == 200) ( dropZone.text("Téléchargement terminé avec succès!"); ) else ( dropZone.text(" Une erreur s'est produite !"); dropZone.addClass("error"); ) ) )

L'écriture de la partie JavaScript est maintenant terminée.

Partie serveur

Il ne nous reste plus qu'à écrire un gestionnaire simple qui enregistrera le fichier à l'emplacement dont nous avons besoin. En écrivant le gestionnaire, je n'irai pas en profondeur, mais ne donnerai qu'un petit exemple en PHP.

C'est tout, j'espère que l'article vous a été utile.

Vous pouvez télécharger les fichiers sources

Peut-être que dans certains cas, les développeurs du service sont à blâmer, mais souvent le problème réside dans les restrictions imposées par les navigateurs. Envisagez de télécharger des fichiers sur le serveur.

Dans la plupart des cas, il vous sera présenté un champ standard avec un bouton pour sélectionner un fichier sur votre ordinateur et/ou un champ dans lequel vous pouvez saisir l'URL d'un fichier hébergé quelque part sur le Web.

Téléchargement de fichiers depuis ordinateur local nous n'y toucherons pas encore, je prévois de publier un article séparé sur ce sujet, nous analyserons le téléchargement à partir de serveur distant.

Les problèmes commencent par la première étape. Même si vous comprenez clairement où chercher une URL et que vous savez utiliser des outils comme firebug, il faut encore quelques clics de souris pour obtenir la bonne adresse. Il serait beaucoup plus pratique de simplement faire glisser l'image souhaitée d'une fenêtre de navigateur à une autre.

Je montrerai l'implémentation d'une telle interface dans cet article. Si vous le souhaitez, vous pouvez voir comment cela fonctionne sur la page de démonstration ou télécharger l'archive source.

Noter! Cet exemple ne fonctionne que dans le navigateur Google Chrome. En théorie, toutes les technologies nécessaires sont prises en charge par Firefox et Safari, mais je ne les ai pas encore traitées.

En tant qu'objets à "glisser", j'ai principalement pris des photos de Wikipedia. Plusieurs problèmes ont été remarqués liés aux caractères non latins dans les URL des images, mais afin de ne pas surcharger l'exemple avec des contrôles et des transformations, je les ai laissés tels quels.

Principe d'opération

Standard HTML5 prend en charge le "glisser" des objets de page ( Glisser déposer). Au fait, j'ai déjà montré un exemple de la mise en œuvre la plus simple de D&D - Glisser-déposer utilisant HTML5. De plus, il existe de nombreuses bibliothèques JavaScript qui implémentent le support D&D.

Mais ici, il est important de comprendre que si vous devez "faire glisser" des images à partir de ressources tierces, vous ne pourrez pas utiliser de bibliothèques. Car vous ne pourrez pas ajouter votre code JS à la page de quelqu'un d'autre. Et pour télécharger une image, nous devons obtenir son URL, c'est-à-dire le navigateur doit transmettre avec l'objet glissé ses paramètres (par exemple, l'attribut src de l'image ou la balise img entière).

Dans ce cas, nous pouvons créer un "récepteur" de photos sur notre page. Ce sera une div régulière à laquelle un gestionnaire d'événements drop sera assigné. Si l'utilisateur "dépose" l'image au-dessus de cette div, alors le gestionnaire sera appelé et dans le premier paramètre il recevra un objet contenant des informations sur l'image glissée.

Mise en œuvre

Commençons par notre page d'application.

Il contient deux blocs : images - ici nous montrerons les images téléchargées et img_target - vous devez faire glisser des images vers ce bloc.

Connectez-vous en bas de la page bibliothèque jQuery et un script main.js qui enverra des informations sur les images glissées au serveur.

Considérez main.js

$(fonction() (
$("#img_target")
.bind("dragent", fonction(événement) (
$(this).addClass("drop_here");
retourner faux ;
})
.bind("dragleave", fonction(événement) (
retourner faux ;
})
.bind("dragover", fonction(événement) (
retourner faux ;
})
.bind("drop", fonction(événement) (
$(this).removeClass("drop_here");
var srcRegex = /src=\"([^\s]+)\"/ig ;
var data = event.originalEvent.dataTransfer.getData("text/html");
var img_data = srcRegex.exec(data);
$.post("upload.php", ("file_url":img_data), function(res) (
var réponse = eval("(" + res + ")");
$("#images").append($(" "));
});
retourner vrai ;
});

Ici, nous attribuons des gestionnaires aux événements dragenter, dragleave et dragover. Tous doivent simplement renvoyer false et, afin d'informer d'une manière ou d'une autre l'utilisateur qu'il est possible de "déposer" l'image, nous définissons la classe CSS drop_here pour le bloc récepteur dans le gestionnaire dragenter.

La majeure partie du travail est effectuée dans le gestionnaire d'événements drop. Lorsque cet événement se produit, nous lisons des informations sur l'objet "déposé" et "coupons" la valeur de l'attribut src, c'est-à-dire URL de l'image (lignes 16-18). Les informations sont transférées dans l'objet event.originalEvent.dataTransfer (ligne 17).

Ensuite, nous formons une requête AJAX normale et transmettons l'URL trouvée en tant que paramètre.

Le script du serveur (upload.php) obtiendra l'URL de l'image sur le serveur distant et la téléchargera. Et en réponse à la requête AJAX, il enverra la nouvelle URL de l'image téléchargée.

À son tour, le gestionnaire de requêtes AJAX créera une balise img et l'insérera dans le bloc images. Ainsi, les images téléchargées apparaîtront au-dessus du champ de téléchargement.

Envisagez upload.php

définir("BASE_URL", "http://localhost/tests/images-upload/");

fonction upload_from_url($file_url) (
$url_segments = éclater("/", $file_url);
$file_name = urldecode(end($url_segments));
if (false !== $file_name) (
$file_name_parts = éclater(".", $file_name);
if (in_array(strtolower(end($file_name_parts)), array("jpeg","jpg","png","gif"))) (
$destination=fopen("upload/".$file_name,"w");
$source=fopen($file_url,"r");
$taillemax=300*1024 ;
$longueur=0 ;
tandis que (($a=fread($source,1024))&&($longueur<$maxsize)) {
$longueur=$longueur+1024 ;
fwrite($destination,$a);
}
fermer($source);
fferme($destination);
}
}
$new_file_url = BASE_URL."upload/".$file_name;
retourne $new_file_url ;
}

$res = array("err" => "Aucune URL de fichier fournie");

si (isset($_POST["url_fichier"])) (
$new_url = upload_from_url($_POST["file_url"]);
$res = array("file_url" => $new_url);
}

echo json_encode($res);

Le principe de fonctionnement est le suivant. Nous lisons l'URL de l'image et essayons de la télécharger (lignes 29-32).

Si l'image est téléchargée, enregistrez-la dans le dossier de téléchargement. L'obtention d'une image à partir d'un serveur distant se fait à l'aide des fonctions fread. Le fichier est lu par blocs de 1 Ko (lignes 15-18). Cette approche vous permet d'interrompre le téléchargement du fichier si sa taille dépasse la limite spécifiée (dans ce cas, 300 Ko).

Après avoir téléchargé le fichier, nous générons une URL pour celui-ci et l'envoyons au navigateur dans format json.

Comme vous pouvez le voir, la mise en œuvre d'un tel chargeur est facile. Et il est assez pratique de l'utiliser. Naturellement, le principal inconvénient est le support du HTML5 par les navigateurs, ou plutôt son absence.

Cependant, si vous créez une interface pour les employés d'une entreprise et que vous pouvez spécifier le type de navigateur, HTML5 peut être utilisé.

Salutations à tous! Dans cet article, je veux parler de certaines de mes expériences avec HTML5. Je vais commencer de loin. Nous devons tous travailler périodiquement avec diverses interfaces Web et nous avons souvent le sentiment que ce travail pourrait être organisé plus efficacement.

Peut-être que dans certains cas, les développeurs du service sont à blâmer, mais souvent le problème réside dans les restrictions imposées par les navigateurs. Envisagez de télécharger des fichiers sur le serveur. Dans la plupart des cas, il vous sera présenté un champ standard avec un bouton pour sélectionner un fichier sur votre ordinateur et/ou un champ dans lequel vous pouvez saisir l'URL d'un fichier hébergé quelque part sur le Web.

Nous ne toucherons pas au téléchargement de fichiers depuis l'ordinateur local pour l'instant, je prévois de publier un article séparé sur ce sujet, nous analyserons le téléchargement depuis un serveur distant.

Les problèmes commencent par la première étape. Même si vous comprenez clairement où chercher une URL et que vous savez utiliser des outils comme firebug, il faut encore quelques clics de souris pour obtenir la bonne adresse. Il serait beaucoup plus pratique de simplement faire glisser l'image souhaitée d'une fenêtre de navigateur à une autre.

Je vais montrer un exemple d'implémentation d'une telle interface dans cet article. Si vous le souhaitez, vous pouvez voir comment cela fonctionne sur la page de démonstration ou .

Noter! Cet exemple ne fonctionne que dans Navigateur Google Chrome. En théorie, toutes les technologies nécessaires sont prises en charge par Firefox et Safari, mais je ne les ai pas encore traitées. En tant qu'objets à "glisser", j'ai principalement pris des photos de Wikipedia. Plusieurs problèmes ont été remarqués liés aux caractères non latins dans les URL des images, mais afin de ne pas surcharger l'exemple avec des contrôles et des transformations, je les ai laissés tels quels.

Principe d'opération

Le standard HTML5 permet de "faire glisser" des objets de page (Drag and Drop). Au fait, j'ai déjà montré un exemple de l'implémentation la plus simple de D&D - Drag & Drop en utilisant HTML5. De plus, il existe de nombreuses bibliothèques JavaScript qui implémentent le support D&D.

Mais ici, il est important de comprendre que si vous devez "faire glisser" des images à partir de ressources tierces, vous ne pourrez pas utiliser de bibliothèques. Car vous ne pourrez pas ajouter votre code JS à la page de quelqu'un d'autre. Et pour télécharger une image, nous devons obtenir son URL, c'est-à-dire le navigateur doit transmettre avec l'objet glissé ses paramètres (par exemple, l'attribut src de l'image ou la balise img entière).

Dans ce cas, nous pouvons créer un "récepteur" de photos sur notre page. Ce sera une div régulière à laquelle un gestionnaire d'événements drop sera assigné. Si l'utilisateur "dépose" l'image au-dessus de cette div, alors le gestionnaire sera appelé et dans le premier paramètre il recevra un objet contenant des informations sur l'image glissée.

Mise en œuvre

Commençons par notre page d'application.

Téléchargement d'images

Il contient deux blocs : images - ici nous montrerons les images téléchargées et img_target - vous devez faire glisser des images vers ce bloc. Au bas de la page, nous incluons la bibliothèque jQuery et le script main.js, qui enverra des informations sur les images glissées au serveur.

Considérez main.js
$(fonction() (
$("#img_target")
.bind("dragent", fonction(événement) (
$(this).addClass("drop_here");
retourner faux ;
})
.bind("dragleave", fonction(événement) (

retourner faux ;
})
.bind("dragover", fonction(événement) (
retourner faux ;
})
.bind("drop", fonction(événement) (
$(this).removeClass("drop_here");
var srcRegex = /src=\"([^\s]+)\"/ig ;
var data = event.originalEvent.dataTransfer.getData("text/html");
var img_data = srcRegex.exec(data);
$.post("upload.php", ("file_url":img_data), function(res) (
var réponse = eval("(" + res + ")");
$("#images").append($(""));
});
retourner vrai ;
});
});
Ici, nous attribuons des gestionnaires aux événements dragenter, dragleave et dragover. Tous doivent simplement renvoyer false et, afin d'informer d'une manière ou d'une autre l'utilisateur qu'il est possible de "déposer" l'image, nous définissons la classe CSS drop_here pour le bloc récepteur dans le gestionnaire dragenter. La majeure partie du travail est effectuée dans le gestionnaire d'événements drop. Lorsque cet événement se produit, nous lisons des informations sur l'objet "déposé" et "coupons" la valeur de l'attribut src, c'est-à-dire URL de l'image. Les informations sont transférées dans l'objet event.originalEvent.dataTransfer.

Ensuite, nous formons une requête AJAX régulière et transmettons l'URL trouvée en tant que paramètre. Le script du serveur (upload.php) obtiendra l'URL de l'image sur le serveur distant et la téléchargera. Et en réponse à la requête AJAX, il enverra la nouvelle URL de l'image téléchargée. À son tour, le gestionnaire de requêtes AJAX créera une balise img et l'insérera dans le bloc images. Ainsi, les images téléchargées apparaîtront au-dessus du champ de téléchargement.

Envisagez upload.php

Define("BASE_URL", "http://localhost/tests/images-upload/");

Fonction upload_from_url($file_url) (
$url_segments = éclater("/", $file_url);
$file_name = urldecode(end($url_segments));
if (false !== $file_name) (
$file_name_parts = éclater(".", $file_name);
if (in_array(strtolower(end($file_name_parts)), array("jpeg","jpg","png","gif"))) (
$destination=fopen("upload/".$file_name,"w");
$source=fopen($file_url,"r");
$taillemax=300*1024 ;
$longueur=0 ;
tandis que (($a=fread($source,1024))&&($longueur<$maxsize)) {
$longueur=$longueur+1024 ;
fwrite($destination,$a);
}
fermer($source);
fferme($destination);
}
}
$new_file_url = BASE_URL."upload/".$file_name;
retourne $new_file_url ;
}

$res = array("err" => "Aucune URL de fichier fournie");

Si (isset($_POST["url_fichier"])) (
$new_url = upload_from_url($_POST["file_url"]);
$res = array("file_url" => $new_url);
}

echo json_encode($res);
?>
Le principe de fonctionnement est le suivant. Nous lisons l'URL de l'image et essayons de la télécharger. Si l'image est téléchargée, enregistrez-la dans le dossier de téléchargement. L'obtention d'une image à partir d'un serveur distant se fait à l'aide des fonctions fread. Le fichier est lu par blocs de 1ko. Cette approche vous permet d'interrompre le téléchargement du fichier si sa taille dépasse la limite spécifiée (dans ce cas, 300 Ko).

Après avoir téléchargé le fichier, nous générons une URL pour celui-ci et l'envoyons au navigateur au format JSON. Comme vous pouvez le voir, la mise en œuvre d'un tel chargeur est facile. Et il est assez pratique de l'utiliser. Naturellement, le principal inconvénient est la prise en charge de HTML5 par les navigateurs, ou plutôt son absence.Cependant, si vous créez une interface pour les employés d'une entreprise et que vous pouvez spécifier le type de navigateur, alors HTML5 peut être utilisé.