Sauvegarder une page HTML après modification JS

Version imprimable

18/05/2020, 12h48
LucasG.

Sauvegarder une page HTML après modification JS

Bonjour tout le monde 8-),

Je vous écris car j'ai un problème qui dure depuis plus de 1 semaine... J'essaye tant bien que mal à le résoudre mais je n'y arrive pas du tout !

J'ai un projet à faire. Ce dernier est de faire une sorte de Wix mais customisé pour mon IUT car il n'y a pas forcement que des dev webs là bas ! Bref, voici le topo :

• Faire une nouvelle présentaion de la page web (c'est fait)
• Permettre d'upload une image, un fichier ... (c'est fait)
• Permettre de faire les changements de titre, texte ... (c'est fait)

• Permettre de télécharger un fichier ou image que les étudiants uploaderont (pas encore fait)
• Permettre la sauvegarde ou la création d'un nouvelle page web avec les modififications etc (pas encore fait)

Les deux derniers sont mes gros problèmes ! Mais j'ai une idée pour le téléchargement mais je n'ai pas encore trouver de bonne réponse. Puisque j'ai réussis à mettre l'upload, je me demande si je peux pas faire le téléchargement en même temps. En gros, lorqu'une personne upload un fichier et qu'elle sauvegarde la page, je me demande si je peux pas faire la même chose mais côté dl.

Bref, merci de votre lecture

LucasG.
19/05/2020, 20h03
bm

Le principe du forum est d'écrire du code et ensuite voir ce qui ne va pas.

Des conseils peuvent ensuite arriver ...

D'accord voici du code pour le download de l'image uploadé mais je suis coincé !

Code:

1
2
3
4
5
<input id="file" type="file" multiple />
 
<div id="prev"></div> <!-- Permet de visualiser l'image uploadé -->
 
<li><a href="#ici" id="ici" download="test.png"></a></li>

Ce code fonctionne c'est la visualisation de l'image !

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
<script>
 
                    (function() {
 
                        function createThumbnail(file) {
                            var reader = new FileReader();
 
                            reader.addEventListener('load', function() {
 
                                var imgElement = document.createElement('img');
                                imgElement.style.maxWidth = '150px';
                                imgElement.style.maxHeight = '150px';
                                imgElement.src = this.result;
                                prev.appendChild(imgElement);
 
                            }, false);
 
                            reader.readAsDataURL(file);
 
                        }
 
                        var allowedTypes = ['png', 'jpg', 'jpeg', 'gif'],
                            fileInput = document.querySelector('#file'),
                            prev = document.querySelector('#prev');
 
                        fileInput.addEventListener('change', function() {
 
                            var files = this.files,
                                filesLen = files.length,
                                imgType;
 
                            for (var i = 0 ; i < filesLen ; i++) {
 
                                imgType = files[i].name.split('.');
                                imgType = imgType[imgType.length - 1];
 
                                if(allowedTypes.indexOf(imgType) != -1) {
                                    createThumbnail(files[i]);
                                }
 
                            }
 
                        }, false);
 
                    })();
                    </script>

Ceci est le code pour le download !

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script>
 
                        var saveData = (function () {
 
                        /*var a = document.createElement("a");
                            document.body.appendChild(a);*/
                            return function (data, fileName) {
                            var blob = new Blob([Image], {type: "image/png",
                                                        type: "image/jpeg"}),
                            url = window.URL.createObjectURL(blob);
                            $("#ici").href = url;
                            $("#ici").download = fileName;
                            $("#ici").click();
                            window.URL.revokeObjectURL(url);
                            };
 
                    }());
 
                        fileName = "test.PNG";
 
                        saveData(fileName);
 
                    </script>

voilà