Upload d'une page html avec ses images
Description
Le but de ce code était de choisir une page html, de la parcourir pour trouver les liens images, ensuite de rechercher ces
images sur le disque, pour enfin envoyer la page html et les images vers l'url choisie.
L'analyse du fichier html se fait grâce au package com.stevesoft.pat (archive : patbinfree153.jar), que l'on peut trouver sur le
site suivant :
http://www.javaregex.com/
J'utilise la classe Regex pour définir une expression régulière qui retrouvera toutes les images du fichier html, pour pouvoir
ensuite vérifier leur existence en local.
l'expression régulière est la suivante :
Mon_Regex = new Regex("(([<][iI][mM][gG][^>]+)[sS][rR][cC][=][\"]{0,1}([^\"> ]*))");
(recherche donc ce qui commence par "img" puis suivi de "src=")
Toutes les images rencontrées sont stockés dans un vecteur, à la condition que la ligne ne commence ni pat http, ni par ftp,
dans quel cas, il s'agit d'une image distante, donc pas à uploader avec la page html.
Regex Mon_Regex2 = new Regex("(^([hH][tT]{2}[pP][:][/]{2})|([fF][tT][pP][:][/]{2}))");
Je remplace dans le fichier html le nom de chaque image par un compteur, comme cela, si une image est rencontrée plusieurs fois,
elle ne sera uploadée qu'une fois. Les images sont donc uploadées sous cette forme :
0.gif
1.jpg
2.jpg
3.bmp
0.gif
etc...
à la place de :
image1.gif
coucou.jpg
salut.bmp
image1.gif
Lors de l'analyse du fichier, je mets à jour une progressbar pour indiquer l'avancement de l'analyse, car j'ai testé avec une
page de 40ko, et ca mets déjà quelques secondes. Le rafraichissement se fait dans un thread :
//démarrage du thread de rafraichissement :
if (tr == null) {
tr = new Thread(this);
}
tr.start();
public void run(){
int envoie_pourcentage = 0;
while (true) {
envoie_pourcentage = (int) ((jp1_prc_actuel / (float)jp1_total)*100);
jp1.setValue(envoie_pourcentage);
jp1.setString(String.valueOf(envoie_pourcentage)+"%");
this.paintAll(this.getGraphics());
try {
Thread.sleep(500);
} catch(InterruptedException e){
}
}
}
Ensuite, il y a une boucle qui parcourt le vecteur d'image, vérifie l'existence de chacune d'elle. Si une image est introuvable,
l'utilisateur est invité à la remplacer.
J'ai aussi crée une classe ImageFile qui dérive de la classe File pour créer des objets File, avec deux propriétés en plus, à
savoir, _htmlname, et _extension.
import java.io.File;
public class ImageFile extends File {
private String _htmlName;
private String _extension;
public ImageFile (String pathname, String s) {
super (pathname);
this._htmlName = s;
this._extension = extension();
}
public ImageFile (String parent, String child, String s) {
super (parent, child);
this._htmlName = s;
this._extension = extension();
}
public void set_htmlName (String s) {
this._htmlName = s;
this._extension = extension();
}
public String get_hmtlName() {
return this._htmlName;
}
public String get_extension() {
return this._extension;
}
public String extension () {
String[] retour = this._htmlName.split("\\.");
return retour[retour.length-1];
}
}
Lorsque tout est prêt à être envoyer, j'appelle la fonction upload :
public void upload(Vector files, String host, int port, String path,
long totalFilesLength, String _htmlFile) {
Je lui passe en paramètres, ce que je récupère du fichier html, à savoir, l'host (url) à contacter, la page ciblée (dans mon
cas, upload.php qui est un script php qui va créer les répertoires qui vont bien, ainsi que les images), le port (80), et l'url
de redirection (teedee.free.fr dans mon cas).
voilà comment on récupère les paramètres :
upload(l_ok,
getParameter("host"),
Integer.parseInt(getParameter("port")),
getParameter("cible"),
taille_totale,
Nom_Fichier);
Voilà le contenu du fichier html qui charge l'applet :
<html>
<head>
<title>
Upload test page
</title>
</head>
<body>
<APPLET
codebase = "."
code = "MaClasse.class"
ARCHIVE = "upload4.jar" "patbinfree153.jar"
width= "200"
height= "80"
hspace = "0"
vspace = "0"
align = "middle">
<param name="host" value="teedee.free.fr">
<param name="port" value="80">
<param name="cible" value="/www/upload.php">
<param name="redirection" value="http://teedee.free.fr">
</APPLET>
</body>
</html>
La méthode utilisée pour envoyer les fichiers (la page html, puis les images, est la méthode POST du protocole HTTP).
Je fabrique le header qui ressemble à ceci :
POST /www/upload.php HTTP/1.1
Host: teedee.free.fr
Content-Type: multipart/form-data; boundary=---------------------------FtNhvo5N264
Content-Length: 85095
Ensuite, viennent le fichier html (avec les images renommées), et chaque image, tout ça séparé à chaque fois par un string
appelé Boundary (obtenu aléatoirement grâce à la fonction getRandomString().
Voilà ce qui passe sur le port 80 lors de l'upload de la page bct.html :
POST /www/upload.php HTTP/1.1
Host: teedee.free.fr
Content-Type: multipart/form-data; boundary=---------------------------FtNhvo5N264
Content-Length: 85095
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="html";
filename="bct.html"
Content-Type: application/octet-stream
<img src="http://www.a.com/gifs/bugs_80x60.gif" align="left">
<img src="0.gif" align="left"><img src="1.jpg"><img src="1.jpg"><img src="2.jpg"><p><i><a href="mailto:#########">[BCT]
Teedee</a></i>, .galement situ. vers le salon avec les autres membres de la [BCT]Te@m.... <i>C'est moi :)</i><p><br><img
src="3.jpg"><p><i><a href="mailto:#######">[BCT]Samray1024</a></i>, ... heu .... pas de bol, un <font size="4"
color="red"><b><i> FLASHBANG</i></b></font> ...<br><br><br><img src="4.jpg"><p><i><a
href="mailto:########">[BCT]Cyberbob002</a></i>, hyper concentr....<p><br><img src="2.jpg"><img src="1.jpg"><img
src="2.jpg"><img src="Ftp://www.a.com/gifs/bugs_80x60.gif" align="left"><img src="5.jpg"><p><i><a
href="mailto:#######">[BCT]Praetaurien</a></i>, ...le plus jeune mais sans aucun doute le meilleur d'entre
nous....<p><a href="droite.html"><img src="6.gif" border=0></a> <a href="droite.html"><font
size="4">retour</font></a> ...<p><form><input type="button" value="Pr.c.dent" onClick="window.history.go(-
1)"></form></body>
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="count"
7
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached0"; filename="0.gif"
Content-Type: application/octet-stream
...(contenu zappé)...
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached1";
filename="1.jpg"
Content-Type: application/octet-stream
...(contenu zappé)...
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached2"; filename="2.jpg"
Content-Type: application/octet-stream
...(contenu zappé)...
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached3"; filename="3.jpg"
Content-Type: application/octet-stream
...(contenu zappé)...
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached4"; filename="4.jpg"
Content-Type: application/octet-stream
...(contenu zappé)...
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached5"; filename="5.jpg"
Content-Type: application/octet-stream
...(contenu zappé)...
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached6"; filename="6.gif"
Content-Type: application/octet-stream
GIF89a...........p..o.....|..y........~....
.
.|....
.~
......
.
................o..............}..........!.!....y..t.....x.$.$.w.....v.$.$..."."%.%.z.&.&#.#!~!).)).)*.*#~##}#+.+*.*,.,
-.-...0.00.0/.//./1.10.08.83.36.65.59.97.78.8:.:;.;@.@<.<=.=A.A?.?B.B?.?
A.AC.CB.BB.BF.FE.EF.FE.EI.IH.HI.IH.HJ.JL.LK.KL.LN.NN.NL.LO.OR.RQ.QS.SR.RT.TV.VT.TZ.ZY.Y[.[Z.Z].]
^.^^.^a.a`.`b.bc.cc.ce.eh.hg.gg.gj.jl.lk.kp.po.ov.vw.wy.yz.z....................................................................
................................................................................................................................
................................................................................................................................
..........................................,............!A.D..A..#-..D..,`..Q.f. G.$E:.C..5q.......F.2Fr.$...a =..'.!
D.T................5t....
.6s..A.2...@.D.r.
.;eT.h..,.6YT. a.,.(*1l..T..-b...SD....2.]b.K.0Tr.D..A..@.\.2......
(....$FF.49...J...4..A...;~.@aAe....8..AD..)F\P..................;
-----------------------------FtNhvo5N264
--HTTP/1.1 200 OK
Date: Mon, 13 Feb 2006 13:45:17 GMTServer: Apache/ProXad [Feb 8 2006 13:16:52]X-Powered-By: PHP/4.3.10Connection: close
Content-Type: text/html/var/
www/free.fr/1/6/teedee/www/htmlbct.htmlbct,htmlbct1200 - Upload OK...
(désolé pour la mise en forme qui a foiré)
Enfin, voilà le contenu du script php qui crée les imgages sur le site :
<?php
$html_dir="html/";
if(!file_exists($html_dir)) {
mkdir($html_dir);
}
if(!is_dir($html_dir)) {
die("Error 500 - Internal Error\nCan't create upload directory");
}
chdir($html_dir);
echo getcwd();
echo $html_file=$_FILES['html']['name'];
$name=implode(".", array_slice(explode(".", $html_file), 0, -1));
list($ext)=array_slice(explode(".", $html_file), -1);
echo $name.",".$ext;
if(file_exists($html_file)) {
$i=1;
while(file_exists($name.$i.".".$ext))
$i++;
$name=$name.$i;
$html_file=$name.".".$ext;
echo $name;
}
if(!move_uploaded_file($_FILES['html']['tmp_name'], $html_file)) {
die("Error 500 - Internal Error\nError while uploading the html file");
}
mkdir($name."_fichiers");
$count=intval($_POST["count"]);
for($i=0; $i<$count; $i++) {
if(!isset($_FILES['attached'.$i])) {
die("Error 500 - Internal Error\nError file $i not present");
}
if(!move_uploaded_file($_FILES['attached'.$i]['tmp_name'], $name."_fichiers/".$_FILES['attached'.$i]['name'])) {
die("Error 500 - Internal Error\nError while uploading file $i");
}
}
echo "200 - Upload OK";
?>
remerciements :
Je tiens à signaler que ce code est largement inspiré de l'applet suivante :
http://www.jupload.biz/en_10.html
Je tiens à remercier l'auteur du site http://www.javaregex.com pour son package qui me permet de faire des expressions régulières.
Pour tester cette applet, vous devez mettre les fichiers suivants sur un site :
upload4.jar
upload4.html
upload.php
patbinfree153.jar
L'applet doit être signée pour fonctionner correctement, sinon, elle ne pourra pas ouvrir les fichiers sur votre disque.
Pour signer l'applet, j'ai utilisé jarsigner.
Maintenant, libre à vous de modifier cette applet pour uploader exactement ce que vous voulez, et où vous voulez ;-)
Amusez vous bien...
images sur le disque, pour enfin envoyer la page html et les images vers l'url choisie.
L'analyse du fichier html se fait grâce au package com.stevesoft.pat (archive : patbinfree153.jar), que l'on peut trouver sur le
site suivant :
http://www.javaregex.com/
J'utilise la classe Regex pour définir une expression régulière qui retrouvera toutes les images du fichier html, pour pouvoir
ensuite vérifier leur existence en local.
l'expression régulière est la suivante :
Mon_Regex = new Regex("(([<][iI][mM][gG][^>]+)[sS][rR][cC][=][\"]{0,1}([^\"> ]*))");
(recherche donc ce qui commence par "img" puis suivi de "src=")
Toutes les images rencontrées sont stockés dans un vecteur, à la condition que la ligne ne commence ni pat http, ni par ftp,
dans quel cas, il s'agit d'une image distante, donc pas à uploader avec la page html.
Regex Mon_Regex2 = new Regex("(^([hH][tT]{2}[pP][:][/]{2})|([fF][tT][pP][:][/]{2}))");
Je remplace dans le fichier html le nom de chaque image par un compteur, comme cela, si une image est rencontrée plusieurs fois,
elle ne sera uploadée qu'une fois. Les images sont donc uploadées sous cette forme :
0.gif
1.jpg
2.jpg
3.bmp
0.gif
etc...
à la place de :
image1.gif
coucou.jpg
salut.bmp
image1.gif
Lors de l'analyse du fichier, je mets à jour une progressbar pour indiquer l'avancement de l'analyse, car j'ai testé avec une
page de 40ko, et ca mets déjà quelques secondes. Le rafraichissement se fait dans un thread :
//démarrage du thread de rafraichissement :
if (tr == null) {
tr = new Thread(this);
}
tr.start();
public void run(){
int envoie_pourcentage = 0;
while (true) {
envoie_pourcentage = (int) ((jp1_prc_actuel / (float)jp1_total)*100);
jp1.setValue(envoie_pourcentage);
jp1.setString(String.valueOf(envoie_pourcentage)+"%");
this.paintAll(this.getGraphics());
try {
Thread.sleep(500);
} catch(InterruptedException e){
}
}
}
Ensuite, il y a une boucle qui parcourt le vecteur d'image, vérifie l'existence de chacune d'elle. Si une image est introuvable,
l'utilisateur est invité à la remplacer.
J'ai aussi crée une classe ImageFile qui dérive de la classe File pour créer des objets File, avec deux propriétés en plus, à
savoir, _htmlname, et _extension.
import java.io.File;
public class ImageFile extends File {
private String _htmlName;
private String _extension;
public ImageFile (String pathname, String s) {
super (pathname);
this._htmlName = s;
this._extension = extension();
}
public ImageFile (String parent, String child, String s) {
super (parent, child);
this._htmlName = s;
this._extension = extension();
}
public void set_htmlName (String s) {
this._htmlName = s;
this._extension = extension();
}
public String get_hmtlName() {
return this._htmlName;
}
public String get_extension() {
return this._extension;
}
public String extension () {
String[] retour = this._htmlName.split("\\.");
return retour[retour.length-1];
}
}
Lorsque tout est prêt à être envoyer, j'appelle la fonction upload :
public void upload(Vector files, String host, int port, String path,
long totalFilesLength, String _htmlFile) {
Je lui passe en paramètres, ce que je récupère du fichier html, à savoir, l'host (url) à contacter, la page ciblée (dans mon
cas, upload.php qui est un script php qui va créer les répertoires qui vont bien, ainsi que les images), le port (80), et l'url
de redirection (teedee.free.fr dans mon cas).
voilà comment on récupère les paramètres :
upload(l_ok,
getParameter("host"),
Integer.parseInt(getParameter("port")),
getParameter("cible"),
taille_totale,
Nom_Fichier);
Voilà le contenu du fichier html qui charge l'applet :
<html>
<head>
<title>
Upload test page
</title>
</head>
<body>
<APPLET
codebase = "."
code = "MaClasse.class"
ARCHIVE = "upload4.jar" "patbinfree153.jar"
width= "200"
height= "80"
hspace = "0"
vspace = "0"
align = "middle">
<param name="host" value="teedee.free.fr">
<param name="port" value="80">
<param name="cible" value="/www/upload.php">
<param name="redirection" value="http://teedee.free.fr">
</APPLET>
</body>
</html>
La méthode utilisée pour envoyer les fichiers (la page html, puis les images, est la méthode POST du protocole HTTP).
Je fabrique le header qui ressemble à ceci :
POST /www/upload.php HTTP/1.1
Host: teedee.free.fr
Content-Type: multipart/form-data; boundary=---------------------------FtNhvo5N264
Content-Length: 85095
Ensuite, viennent le fichier html (avec les images renommées), et chaque image, tout ça séparé à chaque fois par un string
appelé Boundary (obtenu aléatoirement grâce à la fonction getRandomString().
Voilà ce qui passe sur le port 80 lors de l'upload de la page bct.html :
POST /www/upload.php HTTP/1.1
Host: teedee.free.fr
Content-Type: multipart/form-data; boundary=---------------------------FtNhvo5N264
Content-Length: 85095
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="html";
filename="bct.html"
Content-Type: application/octet-stream
<img src="http://www.a.com/gifs/bugs_80x60.gif" align="left">
<img src="0.gif" align="left"><img src="1.jpg"><img src="1.jpg"><img src="2.jpg"><p><i><a href="mailto:#########">[BCT]
Teedee</a></i>, .galement situ. vers le salon avec les autres membres de la [BCT]Te@m.... <i>C'est moi :)</i><p><br><img
src="3.jpg"><p><i><a href="mailto:#######">[BCT]Samray1024</a></i>, ... heu .... pas de bol, un <font size="4"
color="red"><b><i> FLASHBANG</i></b></font> ...<br><br><br><img src="4.jpg"><p><i><a
href="mailto:########">[BCT]Cyberbob002</a></i>, hyper concentr....<p><br><img src="2.jpg"><img src="1.jpg"><img
src="2.jpg"><img src="Ftp://www.a.com/gifs/bugs_80x60.gif" align="left"><img src="5.jpg"><p><i><a
href="mailto:#######">[BCT]Praetaurien</a></i>, ...le plus jeune mais sans aucun doute le meilleur d'entre
nous....<p><a href="droite.html"><img src="6.gif" border=0></a> <a href="droite.html"><font
size="4">retour</font></a> ...<p><form><input type="button" value="Pr.c.dent" onClick="window.history.go(-
1)"></form></body>
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="count"
7
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached0"; filename="0.gif"
Content-Type: application/octet-stream
...(contenu zappé)...
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached1";
filename="1.jpg"
Content-Type: application/octet-stream
...(contenu zappé)...
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached2"; filename="2.jpg"
Content-Type: application/octet-stream
...(contenu zappé)...
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached3"; filename="3.jpg"
Content-Type: application/octet-stream
...(contenu zappé)...
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached4"; filename="4.jpg"
Content-Type: application/octet-stream
...(contenu zappé)...
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached5"; filename="5.jpg"
Content-Type: application/octet-stream
...(contenu zappé)...
-----------------------------FtNhvo5N264
Content-Disposition: form-data; name="attached6"; filename="6.gif"
Content-Type: application/octet-stream
GIF89a...........p..o.....|..y........~....
.
.|....
.~
......
.
................o..............}..........!.!....y..t.....x.$.$.w.....v.$.$..."."%.%.z.&.&#.#!~!).)).)*.*#~##}#+.+*.*,.,
-.-...0.00.0/.//./1.10.08.83.36.65.59.97.78.8:.:;.;@.@<.<=.=A.A?.?B.B?.?
A.AC.CB.BB.BF.FE.EF.FE.EI.IH.HI.IH.HJ.JL.LK.KL.LN.NN.NL.LO.OR.RQ.QS.SR.RT.TV.VT.TZ.ZY.Y[.[Z.Z].]
^.^^.^a.a`.`b.bc.cc.ce.eh.hg.gg.gj.jl.lk.kp.po.ov.vw.wy.yz.z....................................................................
................................................................................................................................
................................................................................................................................
..........................................,............!A.D..A..#-..D..,`..Q.f. G.$E:.C..5q.......F.2Fr.$...a =..'.!
D.T................5t....
.6s..A.2...@.D.r.
.;eT.h..,.6YT. a.,.(*1l..T..-b...SD....2.]b.K.0Tr.D..A..@.\.2......
(....$FF.49...J...4..A...;~.@aAe....8..AD..)F\P..................;
-----------------------------FtNhvo5N264
--HTTP/1.1 200 OK
Date: Mon, 13 Feb 2006 13:45:17 GMTServer: Apache/ProXad [Feb 8 2006 13:16:52]X-Powered-By: PHP/4.3.10Connection: close
Content-Type: text/html/var/
www/free.fr/1/6/teedee/www/htmlbct.htmlbct,htmlbct1200 - Upload OK...
(désolé pour la mise en forme qui a foiré)
Enfin, voilà le contenu du script php qui crée les imgages sur le site :
<?php
$html_dir="html/";
if(!file_exists($html_dir)) {
mkdir($html_dir);
}
if(!is_dir($html_dir)) {
die("Error 500 - Internal Error\nCan't create upload directory");
}
chdir($html_dir);
echo getcwd();
echo $html_file=$_FILES['html']['name'];
$name=implode(".", array_slice(explode(".", $html_file), 0, -1));
list($ext)=array_slice(explode(".", $html_file), -1);
echo $name.",".$ext;
if(file_exists($html_file)) {
$i=1;
while(file_exists($name.$i.".".$ext))
$i++;
$name=$name.$i;
$html_file=$name.".".$ext;
echo $name;
}
if(!move_uploaded_file($_FILES['html']['tmp_name'], $html_file)) {
die("Error 500 - Internal Error\nError while uploading the html file");
}
mkdir($name."_fichiers");
$count=intval($_POST["count"]);
for($i=0; $i<$count; $i++) {
if(!isset($_FILES['attached'.$i])) {
die("Error 500 - Internal Error\nError file $i not present");
}
if(!move_uploaded_file($_FILES['attached'.$i]['tmp_name'], $name."_fichiers/".$_FILES['attached'.$i]['name'])) {
die("Error 500 - Internal Error\nError while uploading file $i");
}
}
echo "200 - Upload OK";
?>
Conclusion :
remerciements :
Je tiens à signaler que ce code est largement inspiré de l'applet suivante :
http://www.jupload.biz/en_10.html
Je tiens à remercier l'auteur du site http://www.javaregex.com pour son package qui me permet de faire des expressions régulières.
Pour tester cette applet, vous devez mettre les fichiers suivants sur un site :
upload4.jar
upload4.html
upload.php
patbinfree153.jar
L'applet doit être signée pour fonctionner correctement, sinon, elle ne pourra pas ouvrir les fichiers sur votre disque.
Pour signer l'applet, j'ai utilisé jarsigner.
Maintenant, libre à vous de modifier cette applet pour uploader exactement ce que vous voulez, et où vous voulez ;-)
Amusez vous bien...
Codes Sources
A voir également
- Upload d'une page html avec ses images
- Html array - Conseils pratiques -PHP
- Exemple de code html page d'accueil ✓ - Forum Graphisme/design
- Exemple de page d'authentification - Conseils pratiques -PHP
- Exemple de page d'accueil html et css ✓ - Forum PHP
- Interface pour chaque page ✓ - Forum PHP
Vous n'êtes pas encore membre ?
inscrivez-vous, c'est gratuit et ça prend moins d'une minute !
Les membres obtiennent plus de réponses que les utilisateurs anonymes.
Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.
Le fait d'être membre vous permet d'avoir des options supplémentaires.