Clone et envoi de formulaire

Version imprimable

1 pièce(s) jointe(s)

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:

Pièce jointe 375363

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

Code:

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:

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

02/05/2018, 15h59
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.

1 pièce(s) jointe(s)

Citation:

Envoyé par Toufik83

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:

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:

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

Pièce jointe 375499

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

Code: