Galerie photo dans une requete sql

Le problème exposé dans ce sujet a été résolu.

Ca marche nickel !!

Je m'étais juste emmêlée les pinceaux avec les liens, j'avais pas mis $key et $donnees dans le même sens partout, donc forcément ça foirait.

C'est trop cool, j'y serai jamais arrivé sans toi :)

Niveau JS, je te préviens j'y connais vraiment rien. C'est un upload que j'ai trouvé et plus ou moins adapté parce que j'avais eu un problème en php.

Je t'explique mon problème: j'ai 2 uploads, un pour les photos et un pour une photo de profil sur lesquels j'ai mis une alerte qui s'ouvre quand le format n'est pas bon.

Pour l'up multiple ça fonctionne nickel mais pour l'up de profil, j'ai caché le input sous une image par défaut.

Du coup quand je referme l'alerte, je n'ai plus rien pour pouvoir reposter une autre image.

Ce que je voudrai donc c'est qu'à la fermeture de l'alerte la photo par défaut avec l'input revienne.

Voilà le code de l'alerte

  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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
/**
     * Created by Elvis Konjoh 
     *
    **/
var confirmOnLeave = function(msg) {

    window.onbeforeunload = function (e) {
        e = e || window.event;
        msg = msg || '';

        // For IE and Firefox
        if (e) {e.returnValue = msg;}

        // For Chrome and Safari
        return msg;
    };

};
var cancelConfirmOnLeave = function() {

    window.onbeforeunload = true;

};


var alertConfig={
            boxBgClass:"",//Background class
            boxBgColor:"",
            boxBtnCloseClass:"",//Button close class
};
/**
 * created by Konjoh Elvis
 *
 */

window.alert = function(alertMessage,title)// On  declare la fonction qui va redesigner l'alerte de base en testant s'il s'agit bien d'une fenêtre alert()
{   
        if(title==undefined)
         title="Oups !";
        var _body = document.getElementsByTagName('body') [0];
        var _layer = document.createElement('div');
        var _box = document.createElement('div');
        var _box_title = document.createElement('h1');
        var _box_text = document.createElement('p');
        var _title = document.createTextNode(title);
        var _text = document.createTextNode(alertMessage);
        var _btn_text = document.createTextNode('OK');
        var _btn =document.createElement('button');
        var _close_btn = document.createElement('span');
        var _close_icon = document.createTextNode(String.fromCharCode(215));


        _close_btn.appendChild(_close_icon);
        _box_title.appendChild(_title);
        _box_title.appendChild(_close_btn);

        if(typeof(alertMessage)=="string")
         _box_text.innerHTML=HTMLentities(alertMessage);
        else
           _box_text.innerHTML=alertMessage;

        _btn.appendChild(_btn_text);

        _box.appendChild(_box_title);
        _box.appendChild(_box_text);
        _box.appendChild(_btn);
        _body.appendChild(_box);
        _body.appendChild(_layer);
        // Background layer image
        var _bg_layer_img = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAFoEvQfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDY2RDlEMDc2NkU3MTFFMkFBQjJEN0JEQ0M0NjM3Q0IiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDY2RDlEMDg2NkU3MTFFMkFBQjJEN0JEQ0M0NjM3Q0IiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NjZEOUQwNTY2RTcxMUUyQUFCMkQ3QkRDQzQ2MzdDQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NjZEOUQwNjY2RTcxMUUyQUFCMkQ3QkRDQzQ2MzdDQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PvElfFoAAAANSURBVHjaY2BgYPAFAABSAE5KPdTrAAAAAElFTkSuQmCC';
        // Set layer style
        _layer.setAttribute('style','z-index:9998;position:fixed;height:100%;width:100%;top:0;left:0;background: url(data:image/png;base64,'+_bg_layer_img+') repeat top left');

        // Set box class for style
        if( alertConfig.boxBgClass!=undefined && alertConfig.boxBgClass !="" )
            _box.className='alert_box '+alertConfig.boxBgClass;
        else
            _box.className = 'alert_box';

        var _boxBgColor="ghostwhite";
        if(alertConfig.boxBgColor!=undefined && alertConfig.boxBgColor !="")
            _boxBgColor=alertConfig.boxBgColor;
        // Set box position
        _box.setAttribute('style', 'background-color:'+_boxBgColor+';position:absolute;z-index:9999;top:'+parseInt((window.innerHeight/2)-_box.offsetHeight)+'px;left:'+parseInt((window.innerWidth/2)-(_box.offsetWidth/2))+'px;');

        //set btn class
        if(alertConfig.boxBtnCloseClass!=undefined && alertConfig.boxBtnCloseClass !="" )
            _btn.className=alertConfig.boxBtnCloseClass;
        else
            _btn.className="button";
        // Layer on click event
        _layer.addEventListener("click", function(){
            _box.className = _box.className+' alert_box_important';
            setTimeout(function(){
                    if( alertConfig.boxBgClass!=undefined && alertConfig.boxBgClass !="" )
                        _box.className='alert_box '+alertConfig.boxBgClass;
                    else
                        _box.className = 'alert_box';
            },100);
        }, false);

        // Button on click event
        _btn.addEventListener("click", function(){
            _body.removeChild(_box);
            _body.removeChild(_layer);
            if(typeof urlToGo == 'string'){
                cancelConfirmOnLeave("");
                //window.location.href = urlToGo;
            }
           // alert("btn close");
            cancelConfirmOnLeave("");

        }, false);

        // Window resize event
        window.onresize = function(event) {
            // Set box position
            _box.setAttribute('style', 'background-color:'+_boxBgColor+';position:absolute;z-index:9999;top:'+parseInt((window.innerHeight/2)-_box.offsetHeight)+'px;left:'+parseInt((window.innerWidth/2)-(_box.offsetWidth/2))+'px;');
        };

        // Document keypress event
        document.onkeypress = function(event) {
            if(event.keyCode == 13){
                _body.removeChild(_box);
                _body.removeChild(_layer);
                if(typeof urlToGo == 'string'){
                    //window.location.href = urlToGo;
                    //window.onbeforeunload = true;

                }
                cancelConfirmOnLeave("");
            }
        };

        _close_btn.addEventListener("click",function(){


            _body.removeChild(_box);
            _body.removeChild(_layer);
           // window.onbeforeunload = true;
            cancelConfirmOnLeave("");
        });

        confirmOnLeave("test");
};

Et la partie de l'up qui affiche l'alerte

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
else{
                 alertConfig={
                   boxBgClass:"myButton", //Background class
                   boxBgColor:"darkcyan",
                   boxBtnCloseClass:"myButton", //Button close class
                }
                alert('Le fichier uploadé n\'est pas une image !</br>Formats acceptés: jpeg, png, jpg ou gif.');

            }

 Et ça sur le input: onchange="document.getElementById('ph_profil').innerHTML = ''"

Bon courage :)

+0 -0

Pas de quoi, content que ça fonctionne.

Dis moi, quel est l'élément qui a pour id 'ph_profil' ?

Tu peux poster le code complet du input stp ?

Edit : à froid comme ça, j'imagine que le 'ph_profil' c'est l'image qui couvre ton input file. Au lieu de faire : 

1
onchange="document.getElementById('ph_profil').innerHTML = ''"

Je pense qu'il vaudrait mieux juste la cacher (display:none en CSS) et la réafficher lorsque tu fermes ton alerte.

Je regarde ça plus en détail quand j'ai le temps.

+0 -0

ph_profil, c'est l'id du label.

Je te mets tout ce sera plus simple!.

Y a ça sur le body onload="document.forms.modale.photos.value=''"

Le form complet

1
2
3
4
<label for="profil" id="ph_profil" name="ph_profil" > 
   <img src="profil_defaut.jpg"></img> 
</label>
<input id="profil" class="profil" type="file" name="profil" accept="image/"  onchange="document.getElementById('ph_profil').innerHTML = ''"  />

Et le script complet de l'up

 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
(function() {

function createThumbnail(file) {

    var reader = new FileReader();

        reader.addEventListener('load', function() {

            var imgElement = document.createElement('img');

            imgElement.style.width = '100px';
            imgElement.style.height = '100px';
            imgElement.style.border = 'solid';
            imgElement.style.color = 'darkcyan';
            imgElement.style.padding = '3px';
            imgElement.src = this.result;

            prev.appendChild(imgElement);

        }, false);

        reader.readAsDataURL(file);
}

    var allowedTypes = ['png', 'jpg', 'jpeg', 'gif'],

        fileInput = document.querySelector('#profil'),
        prev = document.querySelector('#ph_profil');

    fileInput.addEventListener('change', function() {

        var files = this.files,
            filesLen = files.length,
            imgType;

        for (var i = 0; i < 5 ; i++) {

            imgType = files[i].name.split('.');
            imgType = imgType[imgType.length - 1];

            if(allowedTypes.indexOf(imgType) != -1) {

                createThumbnail(files[i]);
            }
            else{
                 alertConfig={
                   boxBgClass:"myButton", //Background class
                   boxBgColor:"darkcyan",
                   boxBtnCloseClass:"myButton", //Button close class
                }
                alert('Le fichier uploadé n\'est pas une image !</br>Formats acceptés: jpeg, png, jpg ou gif.');

            }
        }
    }, false);
})();

Je pense que j'aurai pu le simplifier puisqu'il n'y a qu'une seule image sur celui là mais j'ai préféré le laisser tel quel.

+0 -0

Au lieu de supprimer ton label, il vaudrait mieux le masquer, ça serait plus simple (si j'ai bien compris ce que tu souhaitais faire).

Remplace ton input par ceci :

1
<input id="profil" class="profil" type="file" name="profil" accept="image/"  onchange="document.getElementById('ph_profil').style.display = 'none'"  />

Ici on cache simplement le label, au lieu de le supprimer.

Ensuite, à la fin de ton script, à l'affichage de l'alerte, il suffit de la réafficher. Après cette ligne :

1
alert('Le fichier uploadé n\'est pas une image !</br>Formats acceptés: jpeg, png, jpg ou gif.');

Ajoute ceci :

1
document.getElementById('ph_profil').style.display = 'inline';

Comme ça, on réaffiche le label et donc l'image.

C'est ça que tu souhaitais faire ?

+0 -0

Salut,

Il faut que le label et le input soient réaffichés.

Mon input est déjà en visibility: hidden dans mon css.

1
document.getElementById('ph_profil').style.display = 'inline';

Je dois le mettre où, ligne 52 du script ?

Parce que j'ai essayé mais ça n'a pas marché.

EDIT: J'avais pas vu que tu avais enlevé innerHTML = '' et du coup ça fonctionne nickel !

Pour l'instant, j'ai plus de problème. Tout marche et je crois que je vais enfin arriver au bout de mon site.

Franchement un ENORME merci :) :)

+0 -0
Connectez-vous pour pouvoir poster un message.
Connexion

Pas encore membre ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte