11484 sujets

JavaScript, DOM et API Web HTML5

Supprimer le submit pour upload d'image

Bonjour, j'ai trouver un script sur internet permettant d'uploader une image (avec une fonction resize etc..)

Je l'ai pas mal modifier (surtout coté js) mais ayent un faible niveau dans ce langage je bloques sur un détails plutôt important, qui est : Lancer le script d'upload après avoir sélectionné un fichier et donc, supprimer l'utilisation actuelle avec le bouton submit

Sur ma page j'ai 3 input de type file, dans la fonction change_file() j'ai défini une variable "file_selectionner" qui permet de savoir quelle input (type file) dois être uploader

Voici mon code js :

var show_bar = 0;

function img(id) // permet d'ouvrir l'input file
{
	document.getElementById("img"+id).value = 1;
}

function supp_img(id) // permet de supprimer une image poster
{
	$("#add"+id).attr('class',"fa fa-plus-circle fa-5x pointer");
	$("#add"+id).attr('style',"color:#bbb;");
	$('#nom_file'+id).attr('placeholder', 'Aucun fichier');
	document.getElementById('add'+id).style.display = 'none';
	document.getElementById("img"+id).value = 0;
	document.getElementById("file"+id).value = "";
	document.getElementById("src_img"+id).value = "";
	document.getElementById('nom_file'+id).style.display = 'block';
	document.getElementById('add'+id).style.display = 'block';
	document.getElementById('supp_'+id).style.display = 'none';
	$('#image'+id).html("")
}

function change_file(id) // change l'icon en cas de selection ou non d'un fichier 
{
	var add = document.getElementById("file"+id).value;
	if(add.value != "")
	{	
		$("#add"+id).attr('class',"fa fa-check-circle fa-5x pointer");
		$("#add"+id).attr('style',"color:#58B20D;");
		$('#nom_file'+id).attr('placeholder', add);
		show_bar = 1;
		var file_selectionner = id;
	}
	else
	{
		$("#add"+id).attr('class',"fa fa-plus-circle fa-5x pointer");
		$("#add"+id).attr('style',"color:#bbb;");
		$('#nom_file'+id).attr('placeholder', 'Aucun fichier');
	}
}


var max_file_size 		= 8048576; 
var allowed_file_types 	= ['image/png', 'image/gif', 'image/jpeg', 'image/pjpeg']; 
var message_output_el 	= 'output'; 
var loadin_image_el 	= 'loading-img';
var progressbox     = $('#progressbox');
var submit_btn     = $('#submit-btn');
var info_upload     = $('#info_upload');
var progressbar     = $('#progressbar');
var statustxt       = $('#statustxt');
var completed       = '0%';

var options = { 
	dataType:  'json', 
	target: '#' + message_output_el,   
	beforeSubmit: before_submit,  
	uploadProgress: OnProgress, 
	success: after_success,  
	resetForm: true       
}; 

$('#upload_form').submit(function(){
	$(this).ajaxSubmit(options); 
	return false; 
}); 

function before_submit(formData, jqForm, options){
	var proceed = true;
	var error = [];
	
	$(formData).each(function(){ 
	
		if(this.type == "file"){
			if(window.File && window.FileReader && window.FileList && window.Blob){
				if(this.value !== ""){
					if(allowed_file_types.indexOf(this.value.type) === -1){
						error.push( "Les formats acceptés sont : JPG, JPEG, PNG !");
						proceed = false;
					}
	
					if(this.value.size > max_file_size){ 
						error.push( "<b>Le fichier pèse "+ bytes_to_size(this.value.size) + "</b>, la taille maximale est : de " + bytes_to_size(max_file_size) + "");
						proceed = false;
					}
				}
			}else{
				error.push( "Merci de mettre à jour votre navigateur internet, actuellement vous ne pouvez pas envoyer de photos sur Helpizy !");
				proceed = false;
			}
		}
		
	});	
	
	$(error).each(function(i){ 
		$('#' + message_output_el).html('<div class="error">'+error[i]+"</div>");
	});	
	
	if(!proceed){
		return false;
	}
	
}

function OnProgress(event, position, total, percentComplete)
{
	if(show_bar == 1)
	{
		submit_btn.hide(); 
		info_upload.hide();
		progressbox.show(); 	
	}
	else
	{
		alert('Veuillez renseigner au moins une photo !');
	}
		progressbar.width(completed); 
		statustxt.html(completed); 
		progressbar.width(percentComplete + '%') 
		statustxt.html(percentComplete + '%'); 
}	
	
function after_success(data){
	$('#' + message_output_el).html('');
	switch(data.type){
	
            case 'message':
				$(data.content.thumbs).each(function(i){

					var img1 = document.getElementById("img1").value;
					var img2 = document.getElementById("img2").value;
					var img3 = document.getElementById("img3").value;
					
					if(img1 == 1)
					{
						document.getElementById('add1').style.display = 'none';
						$('#image1').append('<span class="message"><img src="images/annonce/thumbs/'+this+'" /></span>');
						document.getElementById("img1").value = 0;
						document.getElementById("src_img1").value = this;
						document.getElementById('nom_file1').style.display = 'none';
						document.getElementById('supp_1').style.display = 'block';

						progressbar.width('0') 
						statustxt.html('0'); 
						
					}
					
					else if(img2 == 1)
					{
						document.getElementById('add2').style.display = 'none';
						$('#image2').append('<span class="message"><img src="images/annonce/thumbs/'+this+'" /></span>');
						document.getElementById("img2").value = 0;
						document.getElementById("src_img2").value = this;
						document.getElementById('nom_file2').style.display = 'none';
						document.getElementById('supp_2').style.display = 'block';						

						progressbar.width('0') 
						statustxt.html('0'); 
					}
				
					else if(img3 == 1)
					{
						document.getElementById('add3').style.display = 'none';
						$('#image3').append('<span class="message"><img src="images/annonce/thumbs/'+this+'" /></span>');
						document.getElementById("img3").value = 0;
						document.getElementById("src_img3").value = this;
						document.getElementById('nom_file3').style.display = 'none';
						document.getElementById('supp_3').style.display = 'block';

						progressbar.width('0') 
						statustxt.html('0');
					}
					
				});
				
                break;
            case 'error':
                $('#' + message_output_el).html('<div class="error">'+data.content+"</div>");
                break;
        }
	submit_btn.show(); 
	info_upload.show(); 
	progressbox.hide(); 
}

function bytes_to_size(bytes){
   var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
   if (bytes == 0) return '0 Bytes';
   var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
   return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}


Coté html (au cas ou)


				<div id="upload-wrapper">
					<form action="../../../process.php" method="post" enctype="multipart/form-data" id="upload_form">
						<input name="image_file[]" type="file" value="" id="file1" class="1" style="visibility:hidden;width:0;height:0;" onChange="change_file('1');"/>
						<input name="image_file[]" type="file" value="" id="file2" class="2" style="visibility:hidden;width:0;height:0" onChange="change_file('2');"/>
						<input name="image_file[]" type="file" value="" id="file3" class="3" style="visibility:hidden;width:0;height:0" onChange="change_file('3');"/>
						
						<table width="98%" style="margin-left:1%;">
							<tr width="100%" >						
								<td width="33%;" style="border:1px solid #ddd;border-left:0;">
									<div class="post-annonce-medium">Image principale</div>
									<div class="saut_ligne_little"></div>
									<i class="fa fa-plus-circle fa-5x pointer" id="add1" style="color:#bbb;" onclick="file1.click();img('1');"></i>
									<input type="hidden" value="0" id="img1"/>
									<div id="image1"></div>
									<div class="saut_ligne_little"></div>
									<input type="text" id="nom_file1" class="filename readonly" placeholder="Aucun fichier" DISABLED />
									<input type="button" style="display:none;" class="btn rouge supp_img" id="supp_1" onclick="supp_img('1');" value="Supprimer">
								</td>
								
								<td width="34%;" style="border:1px solid #ddd;">
									<div class="post-annonce-medium">Image secondaire</div>
									<div class="saut_ligne_little"></div>
									<i class="fa fa-plus-circle fa-5x pointer" id="add2" style="color:#bbb;" onclick="file2.click();img('2');"></i>
									<input type="hidden" value="0" id="img2"/>
									<div id="image2"></div>
									<div class="saut_ligne_little"></div>
									<input type="text" id="nom_file2" class="filename readonly" placeholder="Aucun fichier" DISABLED />
									<input type="button" style="display:none;" class="btn rouge supp_img" id="supp_2" onclick="supp_img('2');" value="Supprimer">
								</td>
									
								<td width="33%;" style="border:1px solid #ddd;border-right:0;">
									<div class="post-annonce-medium">Image tertiaire</div>
									<div class="saut_ligne_little"></div>
									<i class="fa fa-plus-circle fa-5x pointer" id="add3" style="color:#bbb;" onclick="file3.click();img('3');"></i>
									<input type="hidden" value="0" id="img3"/>
									<div id="image3"></div>
									<div class="saut_ligne_little"></div>
									<input type="text" id="nom_file3" class="filename readonly" placeholder="Aucun fichier" DISABLED />
									<input type="button" style="display:none;" class="btn rouge supp_img" id="supp_3" onclick="supp_img('3');" value="Supprimer">
								</td>							
							</tr>
						</table>						
						<div class="saut_ligne_little"></div>
						
						<div class="progress" id="progressbox" style="display:none;" >
							<div class="progress-bar progress-bar-striped active" id="progressbar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
								<div id="statustxt">0%</div>
							</div>
						</div>
						<input type="submit" value="Envoyer les photos" id="submit-btn" class="btn vert" />
						<img src="images/ajax-loader.gif" id="loading-img" style="display:none;"/>
					</form>
					<div id="output"></div>
				</div>

				<label for="fichier_a_uploader" id="info_upload" style="font-size:10px;">Extension : PNG, JPG, JPEG | Taille max. : 8 Mb</label><br />		
				<script type="text/javascript" src="js/jquery.form.min.js"></script>
				<script type="text/javascript" src="js/uploadimage.js"></script>


Merci d'avance ![/i][/i]
Désoler pour le double poste, il n'y as pas de pré-visualisation .. je pensais pouvoir éditer mon message pour corriger l'affichage mais ce n'est pas possible non plus .. !

Du coup je termine mon poste, je débutes vraiment en javascript, (je viens tout juste de comprendre comment rafraîchir une div en ajax par exemple ..)

du coup, pour ce script d'upload, je comprends tout sauf pour ce qui ce passe après avoir cliquer sur le bouton "envoyer" et je ne suis pas capable, seul, de supprimer le submit pour pouvoir uploader une image directement après avoir sélectionné celle-ci ..

J'espère donc qu'une âme charitable voudra bien m'aider, sur-ce bonne soirée/journée Smiley smile
Sujet clos
Aller à