Css http update

**moijerem** · 08/09/2018, 16h23

Bonjour j utilise un esp32 qui genere un serveur pour le mise a jour .

dans le code arduino j ai reussi a integre une couleur de fond a cette page web mais je ne parvient pas a utilisé une image stocker sur mon serveur ftp
bien entendu la couleur de fond devient inutile si je parvient a chargé mon image

lien de mon image : http://projetrecifalx.free.fr/HTTPUP...ND/fondota.jpg
la partis du code qui génére la page web

Dans l ideal je souhaite que mon image remplisse le fond et avoir la possibilité de changer la couleur de la police
Merci pour votre expertise

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/*
 * Server Index Page
 */
 
const char* serverIndex = "<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
"<body bgcolor='#6E6E6E'>"
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
    "<input type='file' name='update'>"
    "<input type='submit' value='Update'>"
"</form>"
"<div id='prg'>progress: 0%</div>"
"</body>"
"<script>"
"$('form').submit(function(e){"
    "e.preventDefault();"
      "var form = $('#upload_form')[0];"
      "var data = new FormData(form);"
      " $.ajax({"
            "url: '/update',"
            "type: 'POST',"               
            "data: data,"
            "contentType: false,"                  
            "processData:false,"  
            "xhr: function() {"
                "var xhr = new window.XMLHttpRequest();"
                "xhr.upload.addEventListener('progress', function(evt) {"
                    "if (evt.lengthComputable) {"
                        "var per = evt.loaded / evt.total;"
                        "$('#prg').html('progress: ' + Math.round(per*100) + '%');"
                    "}"
               "}, false);"
               "return xhr;"
            "},"                                
            "success:function(d, s) {"    
                "console.log('success!')"
           "},"
            "error: function (a, b, c) {"
            "}"
          "});"
"});"
"</script>";

Invité · 08/09/2018, 23h51

Bonjour,

III. Propriétés de mise en forme d'arrière-plans

**moijerem** · 09/09/2018, 11h59

Merci pour ton retour malgre cela je ne parvient pas a afficher mon image , as tu une idee de mon erreur ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
* Server Index Page
 */
 
const char* serverIndex = 
"<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
"<html>"
  "margin:0;"
  "padding:0;"
  "background: url(http://projetrecifalx.free.fr/HTTPUPDATE/BACKGROUND/fondota.jpg) no-repeat center center fixed;"
  "background-size: cover;"
  "</html>"
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
    "<input type='file' name='update'>"
    "<input type='submit' value='Update'>"
"</form>"
"<div id='prg'>progress: 0%</div>"
"</body>"
"<script>"
"$('form').submit(function(e){"
    "e.preventDefault();"
      "var form = $('#upload_form')[0];"
      "var data = new FormData(form);"
      " $.ajax({"
            "url: '/update',"
            "type: 'POST',"               
            "data: data,"
            "contentType: false,"                  
            "processData:false,"  
            "xhr: function() {"
                "var xhr = new window.XMLHttpRequest();"
                "xhr.upload.addEventListener('progress', function(evt) {"
                    "if (evt.lengthComputable) {"
                        "var per = evt.loaded / evt.total;"
                        "$('#prg').html('progress: ' + Math.round(per*100) + '%');"
                    "}"
               "}, false);"
               "return xhr;"
            "},"                                
            "success:function(d, s) {"    
                "console.log('success!')"
           "},"
            "error: function (a, b, c) {"
            "}"
          "});"
"});"
"</script>";

Nom : Capture.PNG
Affichages : 107
Taille : 91,1 Ko

Invité · 09/09/2018, 12h19

Bonjour,

il faut écrire du code HTML / CSS valide et correct.
Pour le CSS, il se met entre balises <style>.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
* Server Index Page
 */
 
const char* serverIndex = 
"<!DOCTYPE html>"
"<html>"
"<head>"
 
"  <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>"
"  <style>"
"  body {"
  "margin:0;"
  "padding:0;"
  "background: url(http://projetrecifalx.free.fr/HTTPUPDATE/BACKGROUND/fondota.jpg) no-repeat center center fixed;"
  "background-size: cover;"
"  }"
"  </style>"
 
"</head>"
"<body>"
 
"<form method='POST' action='#' enctype='multipart/form-data' id='upload_form'>"
    "<input type='file' name='update'>"
    "<input type='submit' value='Update'>"
"</form>"
"<div id='prg'>progress: 0%</div>"
"<script>"
"$('form').submit(function(e){"
    "e.preventDefault();"
      "var form = $('#upload_form')[0];"
      "var data = new FormData(form);"
      " $.ajax({"
            "url: '/update',"
            "type: 'POST',"               
            "data: data,"
            "contentType: false,"                  
            "processData:false,"  
            "xhr: function() {"
                "var xhr = new window.XMLHttpRequest();"
                "xhr.upload.addEventListener('progress', function(evt) {"
                    "if (evt.lengthComputable) {"
                        "var per = evt.loaded / evt.total;"
                        "$('#prg').html('progress: ' + Math.round(per*100) + '%');"
                    "}"
               "}, false);"
               "return xhr;"
            "},"                                
            "success:function(d, s) {"    
                "console.log('success!')"
           "},"
            "error: function (a, b, c) {"
            "}"
          "});"
"});"
"</script>"
 
"</body>"
"</html>";

**moijerem** · 09/09/2018, 13h09

Merci beaucoup cela fonctionne je continue mes investigation pour changer les boutons et leur emplacements :p merci a toi

**moijerem** · 09/09/2018, 14h35

Dit moi j ai lue ce site
http://www.css3create.com/Creer-un-b...S3-sans-images

malheureusement dans mon code je ne vois pas ou sont déclaré mais bouton , j en déduis que je ne peut pas les modifié ? ni meme leur emplacement ?
merci

Css http update

CSS

Vue hybride

Discussions similaires

Partager

Partager