Discussion :

[Fredy007]

Bonjour,

J'ai un petit soucis au niveau de l'upload avec clone, je fais charger une image, apres le clone se fait automatiquement, pour creer un nouveau ficher d'upload, si jamais je décide de ne pas charger une 2ème image, et je valide le formulaire, normalement je dois recevoir dans la page de traitement des informations, une seule image a uploader, mais je recois 2 images:



Comme vous voyer, une seule image a été chargée, avec le nom "9Xqsk.jpg", mais je recois la meme image 2 fois.

Code :

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

1
2
3
4
5
6
7
 
[name] => Array
                (
                    [0] =>  // c'est un fichier file vide (n'est pas chargé)
                    [1] => 9Xqsk.jpg // le fichier que j'ai chargé
                    [2] => 9Xqsk.jpg // c'est le champs où le clone s'exécute, et porte les mêmes critères du champs chargé
                )

Code du clone

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
49
50
 
var cloned = $('#' + mediaType + '-Up-Area-' + incInputs).clone().insertAfter('div#' + mediaType + '-Up-Area-' + incInputs + ':last');
                  console.log(cloned);
 
					// get now timestamp, we need to divide by 1000
					var seconds = $.now() / 1000;
					//console.log(seconds);
 
					var timeNow = seconds.toString();
					//console.log(timeNow);
 
					var timestamps = timeNow.split(".");
					//console.log(timestamp[0]);
					var timestamp	= timestamps[0];
 
 
                  var randKey = generateRandomID(20);
 
					// get a new key for next cloned item
                  var setClonedID = randKey + ''+ timestamp;
 
                  console.log('curr ' + incInputs);
                  console.log('next ' + setClonedID);
 
 
                  // find file uploaded ID and replace them with the new file to upload ID
                  cloned.closest('#' + mediaType + '-Up-Area-' + incInputs).attr('id', mediaType + '-Up-Area-' + setClonedID);
 
                  cloned.find('#' + mediaType + '-Up-' + incInputs).attr('id', mediaType + '-Up-' + setClonedID);
                  cloned.find('label').attr('for', mediaType + '-fileInput-' + setClonedID);
                  cloned.find('#' + mediaType + '-File-' + incInputs).attr('id', mediaType + '-File-' + setClonedID);
                  cloned.find('#' + mediaType + '-fileInput-' + incInputs).attr('id', mediaType + '-fileInput-' + setClonedID);
                  cloned.find('#' + mediaType + '-ProgressBarPercent-' + incInputs).attr('id', mediaType + '-ProgressBarPercent-' + setClonedID);
                  cloned.find('#' + mediaType + '-AdActions-' + incInputs).attr('id', mediaType + '-AdActions-' + setClonedID);
                  cloned.find('#' + mediaType + '-Del-' + incInputs).attr('id', mediaType + '-Del-' + setClonedID);
                  cloned.find('#' + mediaType + '-Star-' + incInputs).attr('id', mediaType + '-Star-' + setClonedID);
 
                  // then make changes for new cloned file
/*
Ici je change l'attribut src de l'ancienne image avec une image par défaut
*/
                  cloned.find('#' + mediaType + '-File-' + setClonedID).attr('src', 'Images/'+mediaType+'-upload-area.png');
                  cloned.find('#' + mediaType + '-ProgressBarPercent-' + setClonedID).html('0%');
                  cloned.find('#' + mediaType + '-ProgressBarPercent-' + setClonedID).removeClass('progress-bar-success').addClass('progress-bar-custom');
                  cloned.find('#' + mediaType + '-MsgDisplay-' + setClonedID).html('Choose 1 file');
 
 
 
                  // hide delete button for the cloned file
					$('#' + mediaType + '-AdActions-' + setClonedID).css('display', 'none');

Merci a vous

[Toufik83]

bonjour,
qu'est ce qu'elle vaut la variable mediaType? l'id de l'input de ton image à télécharger?
probablement c'est le clone() qui pose problème, vu qu'il y'a deux éléments identiques dans le document, rappelle-toi qu'un id doit être unique dans une page html.

[Fredy007]

bonjour,
qu'est ce qu'elle vaut la variable mediaType?

mediaType est une variable qui définit le type de fichier (image: img, video: vid)

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Code HTML
<div class="upMedia img-Up text-center" id="img-Up-df1f91c488fe965539181525264463">
					<label for="img-fileInput-df1f91c488fe965539181525264463" style="cursor: pointer">
						<img src="Images/img-upload-area.png" class="img-Up-Src" id="img-File-df1f91c488fe965539181525264463">
						<input class="img-Up-File uploadHiddenFiles" id="img-fileInput-df1f91c488fe965539181525264463" name="uploads[]" type="file" style="display: none;">
					</label>
</div>
 
// Traitement
// split to get the media type (image or vide) and get the number
        var getSuffixPrefix  = getID.split('-Up-'); // output: (2) ["img", "df1f91c488fe965539181525264463"]
 
// are we uploading img or video
        var mediaType   = getSuffixPrefix[0]; // img
        console.log(mediaType);

Je vérifie bien que les id sont uniques avec la génération d'un nouveau id après le clone:

Code :

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

1
2
3
4
5
 
var randKey = generateRandomID(20);
 
					// get a new key for next cloned item
                  var setClonedID = randKey + ''+ timestamp;

Voici le retour des informations avec print_r($_FILES) et print_r($_POST):

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
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
146
 
Array
(
    [uploads] => Array
        (
            [name] => Array
                (
                    [0] => 17517225_627013807488488_3351153390959722496_n.mp4
                    [1] => 17517225_627013807488488_3351153390959722496_n.mp4
                    [2] => Screen Shot 2018-05-02 at 16.19.44.png
                    [3] => Screen Shot 2018-05-02 at 16.19.44.png
                )
 
            [type] => Array
                (
                    [0] => video/mp4
                    [1] => video/mp4
                    [2] => image/png
                    [3] => image/png
                )
 
            [tmp_name] => Array
                (
                    [0] => /tmp/phpBalCMt
                    [1] => /tmp/phpPb9LbS
                    [2] => /tmp/phptaGKUg
                    [3] => /tmp/php76UdGF
                )
 
            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                    [2] => 0
                    [3] => 0
                )
 
            [size] => Array
                (
                    [0] => 1382700
                    [1] => 1382700
                    [2] => 206334
                    [3] => 206334
                )
 
        )
 
)
Array
(
    [category] => 
    [hcategoryID] => 
    [city] => Fes
    [district] => 
    [adNTitle] => 
    [adNDesc] => 
    [adPrice] => 1
    [adPriceNeg] => 
    [adReference] => 2afb8bc4
    [lang] => fr
    [form_key] => a346b179b71c5cb7c1bb
)
 
city Fes<pre>yes1files<br>file Array<br>Array
(
    [uploads] => Array
        (
            [name] => Array
                (
                    [0] => 17517225_627013807488488_3351153390959722496_n.mp4
                    [1] => 17517225_627013807488488_3351153390959722496_n.mp4
                    [2] => Screen Shot 2018-05-02 at 16.19.44.png
                    [3] => Screen Shot 2018-05-02 at 16.19.44.png
                )
 
            [type] => Array
                (
                    [0] => video/mp4
                    [1] => video/mp4
                    [2] => image/png
                    [3] => image/png
                )
 
            [tmp_name] => Array
                (
                    [0] => /tmp/phpBalCMt
                    [1] => /tmp/phpPb9LbS
                    [2] => /tmp/phptaGKUg
                    [3] => /tmp/php76UdGF
                )
 
            [error] => Array
                (
                    [0] => 0
                    [1] => 0
                    [2] => 0
                    [3] => 0
                )
 
            [size] => Array
                (
                    [0] => 1382700
                    [1] => 1382700
                    [2] => 206334
                    [3] => 206334
                )
 
        )
 
)
2post<br>3Array
(
    [category] => 
    [hcategoryID] => 
    [city] => Fes
    [district] => 
    [adNTitle] => 
    [adNDesc] => 
    [adPrice] => 1
    [adPriceNeg] => 
    [adReference] => 2afb8bc4
    [lang] => fr
    [form_key] => a346b179b71c5cb7c1bb
)
45uploadFiles Object
(
    [uErrors] => Array
        (
        )
 
    [aErrors] => Array
        (
        )
 
    [dErrors] => Array
        (
        )
 
    [fileName] => 
    [fileField] => fileInfo-1
    [fileTmp] => 
    [fileSize] => 
    [fileType] => 
    [fileError] => 
)
4{"success":null}