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...