Scribd Logo
Importer

Bienvenue sur Scribd !

  • Plle

    Transféré par

    andriamamolisoa
    4 vues7 pages
    Extrait de code HTML pour un site

    Titre original

    plle

    Copyright

    © © All Rights Reserved

    Formats disponibles

    DOC, PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Extrait de code HTML pour un site

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    4 vues7 pages

    Plle

    Transféré par

    andriamamolisoa
    Extrait de code HTML pour un site

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme DOC, PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 7

    Voici un exemple de code pour partager des photos sur un site web en utilisant HTML, CSS et JavaScript :

    HTML :

    <!DOCTYPE html>

    <html>

    <head>

    <title>Partage de photos</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

    </head>

    <body>

    <h1>Partage de photos</h1>

    <form id="uploadForm" enctype="multipart/form-data">

    <input type="file" id="fileInput" name="photo" accept="image/*">

    <button type="submit">Envoyer</button>

    </form>

    <div id="gallery"></div>

    <script src="script.js"></script>

    </body>

    </html>

    CSS (styles.css) :

    #gallery {
    display: flex;

    flex-wrap: wrap;

    .photo {

    width: 200px;

    height: 200px;

    margin: 10px;

    .photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    window.onload = function() {

    const uploadForm = document.getElementById('uploadForm');

    const fileInput = document.getElementById('fileInput');

    const gallery = document.getElementById('gallery');

    uploadForm.addEventListener('submit', function(event) {

    event.preventDefault();

    const files = fileInput.files;

    for (let i = 0; i < files.length; i++) {


    const file = files[i];

    const reader = new FileReader();

    reader.onload = function() {

    const photoDiv = document.createElement('div');

    photoDiv.className = 'photo';

    const img = document.createElement('img');

    img.src = reader.result;

    photoDiv.appendChild(img);

    gallery.appendChild(photoDiv);

    };

    reader.readAsDataURL(file);

    });

    };

    Partage de photos en ligne

    User

    Code de partage de photos sur un site web

    ChatGPT

    Voici un exemple de code pour partager des photos sur un site web en utilisant HTML, CSS et JavaScript :
    HTML :

    html

    Copy code

    <!DOCTYPE html>

    <html>

    <head>

    <title>Partage de photos</title>

    <link rel="stylesheet" type="text/css" href="styles.css">

    </head>

    <body>

    <h1>Partage de photos</h1>

    <form id="uploadForm" enctype="multipart/form-data">

    <input type="file" id="fileInput" name="photo" accept="image/*">

    <button type="submit">Envoyer</button>

    </form>

    <div id="gallery"></div>

    <script src="script.js"></script>

    </body>

    </html>

    CSS (styles.css) :
    css

    Copy code

    #gallery {

    display: flex;

    flex-wrap: wrap;

    .photo {

    width: 200px;

    height: 200px;

    margin: 10px;

    .photo img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    JavaScript (script.js) :

    javascript

    Copy code

    window.onload = function() {

    const uploadForm = document.getElementById('uploadForm');


    const fileInput = document.getElementById('fileInput');

    const gallery = document.getElementById('gallery');

    uploadForm.addEventListener('submit', function(event) {

    event.preventDefault();

    const files = fileInput.files;

    for (let i = 0; i < files.length; i++) {

    const file = files[i];

    const reader = new FileReader();

    reader.onload = function() {

    const photoDiv = document.createElement('div');

    photoDiv.className = 'photo';

    const img = document.createElement('img');

    img.src = reader.result;

    photoDiv.appendChild(img);

    gallery.appendChild(photoDiv);

    };

    reader.readAsDataURL(file);

    });

    };

    Ce code utilise un formulaire avec un champ de fichier (<input type="file">) pour permettre à
    l'utilisateur de sélectionner des photos. Lorsque l'utilisateur soumet le formulaire, le JavaScript
    intercepte l'événement et itère sur les fichiers sélectionnés. Il utilise FileReader pour lire chaque fichier
    en tant qu'URL de données (data URL) et crée ensuite une nouvelle div avec une classe photo pour
    afficher chaque photo dans la galerie.

    Vous aimerez peut-être aussi