Discussion :

[lib-inform]

Bonjour à tous,

Etant débutant en Javascript, j'ai besoin de votre aide. Je vous expose mon problème :

Sur le site que je développe actuellement, afin de pouvoir mettre à jour les photos des articles, j'aimerai qu'en cliquant sur la photo à changer, je puisse avoir accès à l'upload d'une nouvelle photo.

Actuellement, j'affiche mes photos avec une balise

Code html :

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

<INPUT type="image" id="photo" src="photo.jpg" onclick='changeImage()' />

et ma fonction Javascript est :

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
function changeImage()
{
var fileInput = document.querySelector('#photo');
 
 
fileInput.addEventListener('change', function() {
        var xhr = new XMLHttpRequest();
 
        xhr.open('POST', 'UploadPict.php');
        xhr.addEventListener('load', function() {
        alert('Upload terminé !');
        });
 
        var form = new FormData();
        form.append('file', fileInput.files[0]);
        xhr.send(form);
});
}

Je vous remercie de votre aide car lors que je clique sur l'image, à part me réactualiser la page, je n'ai pas le résultat escompté.

[eleydet]

Bonjour,

Si vos images ne sont pas trop nombreuses, il est peut-être préférable de les pré-charger?

Code :

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

1
2
3
4
5
6
7
 
var listephotos=new Array("1.gif","2.gif","3.gif","4.gif","5.gif","6.gif","7.gif","8.gif","9.gif","10.gif","11.gif");
var photo=new Array();
for (var i=0;i<listephotos.length;i++) {
  photo[i]=new Image();
  photo[i].src=listephotos[i];
}

[ABCIWEB]

Salut,

Il y a une doc ici.

Au besoin il y a un module d'upload javascript complet ici. Il permet la prévisualisation des vignettes, le recadrage avant upload, le retour d'informations en temps réel, la reprise de téléchargement pour les gros fichiers, etc. et est livré dans un dossier prêt à l'emploi avec une quinzaine d'exemples fonctionnels si tu utilises php côté serveur (il suffit de dézipper le dossier et de le placer sur le serveur pour faire les premiers tests).

[lib-inform]

bonjour à tous,

Si vos images ne sont pas trop nombreuses, il est peut-être préférable de les pré-charger?

Malheureusement, ce n'est pas possible, car le but est justement de permettre l'upload de nouvelles photos sur mon serveur donc je ne connais pas la liste des photos à l'avance.

Il y a une doc ici.

Je regarde à cela et te redis si c'est bien ce que je souhaite, mais a première vue, le module offre beaucoup de possibilités.

Je te remercie de l'info

[lib-inform]

Bonjour à tous,

Excusez moi du délai de réponse, mais j'ai tester différentes solutions quine me conviennent pas ou qui ne fonctionne pas correctement.

J'arrive à prévisualiser les images une fois que j'ai déjà fait ma modification, mais dans ce cas là, je n'arrive pas à afficher l’aperçu de mon image qui se trouve dans ma base de données.

J'ai trouvé un code qui donne l'effet que je souhaite, mais je n'arrive pas à le faire fonctionner sur mon site, et je ne m'y connais pas assez pour voir d'où vient le problème.

Je vous le soumet si vous pouvez m'éclairer :

Voici le code JS :

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
function init() {
    $("img[data-type=editable]").each(function (i, e) {
        var _inputFile = $('<input/>')
            .attr('type', 'file')
            .attr('hidden', 'hidden')
            .attr('onchange', 'readImage()')
            .attr('data-image-placeholder', e.id);
 
        $(e.parentElement).append(_inputFile);
 
        $(e).on("click", _inputFile, triggerClick);
    });
}
 
function triggerClick(e) {
    e.data.click();
}
 
Element.prototype.readImage = function () {
    var _inputFile = this;
    if (_inputFile && _inputFile.files && _inputFile.files[0]) {
        var _fileReader = new FileReader();
        _fileReader.onload = function (e) {
            var _imagePlaceholder = _inputFile.attributes.getNamedItem("data-image-placeholder").value;
            var _img = $("#" + _imagePlaceholder);
            _img.attr("src", e.target.result);
        };
        _fileReader.readAsDataURL(_inputFile.files[0]);
    }
};
 
(
 
function (yourcode) {
    "use strict";
    yourcode(window.jQuery, window, document);
}(
 
function ($, window, document) {
    "use strict";
    // The $ is now locally scoped 
    $(function () {
        // The DOM is ready!
        init();
    });
 
    // The rest of your code goes here!
}));

et le Html :

Code html :

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

<img id="imgArticle" src="http://localhost/MonSite/Image/image1.jpg" data-type="editable" width="50px" />

visiblement ce code utilise aussi du JQuery, que j'ai mis en place sur mon serveur, mais j'ai une erreur qui me précise que la fonction $ (en gras) n'existe pas ...

[ABCIWEB]

Cette erreur indique que jQuery n'est pas chargé.

En plus de mettre jQuery sur ton serveur, il faut dire à ton script d'aller lire le fichier sur ton serveur. Par exemple si tu l'as mis dans un dossier nommé "Scripts":

Code :

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

<script src="Scripts/jquery-1.12.4.js"></script>

ou tu peux l'inclure depuis des serveurs externes

Code :

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

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

Sinon t'as pas pu adapter le module d'upload à tes besoins ? J'aurais pu t'aider si t'étais pas très loin du compte.

[lib-inform]

Cette erreur indique que jQuery n'est pas chargé.

Merci, j'ai refait le lien et effectivement, ça fonctionne. Soit la source que j'ai récupéré était corrompue, soit mon lien comportait une erreur. je te remercie.

Sinon t'as pas pu adapter le module d'upload à tes besoins ? J'aurais pu t'aider si t'étais pas très loin du compte.

Non, je n'ai pas réussi à l'adapté car j'utilise cette fonction dans un tableau pour modifier plusieurs articles en même temps, donc difficile d'adapter un script dans ce cas là mais je note pour une prochaine fois...