CGI - Importer une image sur mon site
Bonjour,
Je passe le bac Informatique, mon projet est un site où on peut visualiser une image, ou sa propre image, sous deux types de daltonisme différent, j'utilise CGI pour importer l'image sur mon site, malheureusement je n'arrive qu'à importer l'image sous Linux, impossible de le faire marcher sous Windows (Firefox ne sait pas ouvrir cette adresse car l’un des protocoles suivants (c) n’est associé à aucun programme ou n’est pas autorisé dans ce contexte.), auriez-vous idée de ce qui cause ce problème ? Je cherche aussi à faire marcher les boutons radio sur la gauche, je ne trouve que des solutions en JavaScript et le programme ne s'étend qu'à Python et HTML/CSS, y a-t-il possibilité de le faire marcher avec seulement avec Python et HTML/CSS ?
Merci
Code:
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
| <!DOCTYPE html>
<head>
<title>Simulateur de daltonisme</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet">
</head>
<body>
<div id="banniere">
<h1>SIMULATEUR DE DALTONISME</h1>
</div>
<div id="centre">
<div id="nav">
<a class="active" href="/index.html">Convertisseur</a>
<a href="/daltonisme.html"> Le daltonisme</a>
<a href="/programme.html">Le programme</a>
</div>
<div id="block">
<div id="form">
<aside>
<form>
<input type="radio" name="types"> Normal<br>
<input type="radio" name="types"> Protanopie<br>
<input type="radio" name="types"> Deutéranopie<br>
</form>
</aside>
</div>
<div id="image">
<img src="image.jpg" width="500px"/>
</div>
<div id="upload">
<aside>
<form enctype = "multipart/form-data"
action = "C:\Users\Augustin\Desktop\ISN\cgi-bin\save_file.py" method = "post">
<p><input type = "file" accept="image/*" name = "file" id="btn1" /></p>
<p><input id="btn2" type="submit" value="Upload"/></p>
</form>
<a class="download" download href="/cgi-bin/img/img.jpg" id="btn3">Télécharger l'image</a>
</aside>
</div>
</div>
</div>
</body>
</html> |
Code:
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
| h1 {
font-size: 70px;
font-weight: bold;
text-align: center;
color: #6C7A89;
text-shadow: 2px 2px #3c4a59;
}
a {
text-align: center;
}
img {
float: none;
}
body {
margin: 0px;
background-color: #1c2a39;
color: #ecf0f1;
font-family: 'Oswald', sans-serif;
}
#centre {
text-align: center;
margin: 50px;
background-color: #6C7A89 ;
overflow: auto;
}
#nav {
background-color: #3c4a59;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
box-shadow: 0px 5px #2c3a49;
}
#nav a {
display: block;
color: white;
text-align: center;
padding: 15px 15px;
text-decoration: none;
}
a:hover:not(.active) {
background-color: #9caab9;
box-shadow: 0px 5px #5c6a79;
}
.active {
background-color: #6C7A89;
box-shadow: 0px 5px #4c5a69;
}
#form {
text-align: left;
display: block;
float: left;
padding: 10px;
flex-grow: 1;
}
#block {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
align-items: flex-start;
}
#image {
padding-top: 5px;
}
#btn1 {
background-color: #3c4a59;
border: none;
color: white;
padding: 10px 15px;
margin: 10px;
cursor: pointer;
text-decoration: none;
box-shadow: 0px 2px #2c3a49
}
#btn2 {
background-color: #3c4a59;
border: none;
color: white;
padding: 10px 20px;
cursor: pointer;
text-decoration: none;
box-shadow: 0px 2px #2c3a49;
}
#btn3 {
border-top: 40px;
background-color: #3c4a59;
border: none;
color: white;
padding: 10px 20px;
cursor: pointer;
text-decoration: none;
box-shadow: 0px 2px #2c3a49;
} |
Code:
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
| #!/usr/bin/python
import cgi, os
import cgitb;
cgitb.enable()
form = cgi.FieldStorage()
# Get filename here.
fileitem = form['filename']
# Test if the file was uploaded
if fileitem.filename:
# strip leading path from file name to avoid
# directory traversal attacks
fn = os.path.basename(fileitem.filename)
open('/img/' + fn, 'wb').write(fileitem.file.read())
message = 'The file "' + fn + '" was uploaded successfully'
else:
message = 'No file was uploaded'
print
"""\
Content-Type: text/html\n
<html>
<body>
<p>%s</p>
</body>
</html>
""" % (message,) |
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13
| #!/usr/bin/env python3
import http.server
PORT = 9999
server_address = ("", PORT)
server = http.server.HTTPServer
handler = http.server.CGIHTTPRequestHandler
print("Serveur actif sur le port :", PORT)
httpd = server(server_address, handler)
httpd.serve_forever() |