CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 13:09:16

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

CONVERTISSEUR D'IMAGE BASE 64

Information sur la source

Note :

10,00 / 10

Catégorie :Trucs & Astuces Classé sous :base 64, convertisseur base64, convertisseur Niveau :Débutant Date de création :09/08/2011 Date de mise à jour :16/02/2012 18:55:30 Vu / téléchargé :2 139 / 76

Auteur : kazma

Ecrire un message privé

Commentaire sur cette source (2)

Ajouter un commentaire et/ou une note

Description

c'est une petite source que j'ai fait en explorant file api du html5 et qui finalement me sert a convertir des images en base 64 exploitable par le javascript ou le css, on choisi les images par un input file ou par drag & drop du bureau vers le navigateur le choix peut etre multiple, en sortie on se retrouve avec le nom de l'image suivit de la miniature de l'image puis d'un textearea contenant le fichier en base 64. il fonctionne avec firefox et chrome pour ie il faut utiliser la version beta de ie 10 pour opera seul le input fonctionne pas de drag & drop et ne fonctionne pas avec safarie.

Source

<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
.box{
background-color:gray;
height:100px;
width:60%;
margin:auto;
border:1px ridge #aaa;
-moz-box-shadow: 10px 10px 10px #212121;
-webkit-box-shadow: 10px 10px 10px #212121;
box-shadow: 10px 10px 10px #616161;
text-align:center;
}
textarea{
width:100%;
height:150px;
margin:auto;
}
#conteneur{
width:60%;
}
div{
margin:auto;
}
</style>
<script type="text/javascript">
var compteur=0
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
if (!e) {
var fichier = document.getElementById('fileinput').files;
}
else {
var fichier = e.dataTransfer.files;
}
charger(fichier)
}
function charger(fichier){
if (fichier[compteur].type.match('image.*')) {
var dv= document.createElement('div')
var text = document.createTextNode(fichier[compteur].name)
var imamage=document.createElement('img');
imamage.style.height=40+'px'
var rb= document.createElement('br')
dv.appendChild(text);
imamage=dv.appendChild(imamage);
dv.appendChild(rb);
var construction=document.createElement('textarea')
var elmage= dv.appendChild(construction);
document.getElementById('conteneur').appendChild(dv);
}
var charge=new FileReader();
charge.readAsDataURL(fichier[compteur]);
charge.onloadend = function(e){
elmage.value = e.target.result;
imamage.src=e.target.result;
if (compteur<fichier.length-1) {
compteur++;
charger(fichier);
}
else{
compteur=0;
}
}
}
</script>
</head>
<body>
<div class='box'
ondragenter="event.stopPropagation(); event.preventDefault();"
ondragover="event.stopPropagation(); event.preventDefault();"
ondrop="event.stopPropagation(); event.preventDefault(); drop(event);">
boite a drop
</div>
<br>
<div>
<input type='file' multiple='multiple' id='fileinput'>
<input type='button' id='btnLoad' value='Load' onclick='drop();'>
</div>
<br>
<div id='conteneur'></div>
</body>
</html>

<!doctype html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<style type="text/css">
.box{
	background-color:gray;
	height:100px;
	width:60%;
	margin:auto;
	border:1px ridge #aaa;
	-moz-box-shadow: 10px 10px 10px #212121;
	-webkit-box-shadow: 10px 10px 10px #212121;
	box-shadow: 10px 10px 10px #616161;
	text-align:center;
	}
textarea{
	width:100%;
	height:150px;
	margin:auto;
	}
#conteneur{
	width:60%;
	}
div{
	margin:auto;
	}
	</style>
	<script type="text/javascript">
	var compteur=0
	function dragenter(e) {
		e.stopPropagation();
		e.preventDefault();
	}
	function drop(e) {
		if (!e) {
			var fichier = document.getElementById('fileinput').files;
		}
		else {
			var fichier = e.dataTransfer.files;
		}
		charger(fichier)
	}
	function charger(fichier){
		if (fichier[compteur].type.match('image.*')) {
			var dv= document.createElement('div')
			var text = document.createTextNode(fichier[compteur].name)
			var imamage=document.createElement('img');
			imamage.style.height=40+'px'
			var rb= document.createElement('br')
			dv.appendChild(text);
			imamage=dv.appendChild(imamage);
			dv.appendChild(rb);
			var construction=document.createElement('textarea')
			var elmage= dv.appendChild(construction);
			document.getElementById('conteneur').appendChild(dv);
		}
		var charge=new FileReader();
		charge.readAsDataURL(fichier[compteur]);
		charge.onloadend = function(e){
			elmage.value = e.target.result;
			imamage.src=e.target.result;
			if (compteur<fichier.length-1) {
				compteur++;
				charger(fichier);
			}
			else{
				compteur=0;
			}
		}
	}
</script>
</head>
	<body>
	<div class='box'
	ondragenter="event.stopPropagation(); event.preventDefault();"
	ondragover="event.stopPropagation(); event.preventDefault();"
	ondrop="event.stopPropagation(); event.preventDefault(); drop(event);">
	boite a drop
	</div>
	<br>
	<div>
	<input type='file' multiple='multiple' id='fileinput'>
	<input type='button' id='btnLoad' value='Load' onclick='drop();'>
	</div>
	<br>
	<div id='conteneur'></div>
	</body>
	</html>

Conclusion

utile

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

base64.html 2 375 octets

Télécharger le zip

Historique

09 août 2011 18:06:05 :: mise au normes html5
16 février 2012 18:55:30 :: ajout de miniatures

Sources du même auteur

BOUTON ROTATIF

EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...

PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS

DRAG & DROP VERS UN CANVAS

DIAPO EN CSS 3D

Toutes les sources de kazma

Sources de la même categorie

PARSER LES CARACTÈRES HTML D'UNE STRING par jdmcreator

CONSTRUCTION D'UNE TABLE TRIABLE À PARTIR D'UN TABLEAU 2D par phm

SUBDIVISER LE RÉSULTAT D'UNE RECHERCHE EN PAGES par kimmp

TIMER : SETTIMEOUT & SETINTERVAL AMÉLIORÉS par jdmcreator

ONGLETS ET CHANGEMENT INSTANTANÉ DE LA LANGUE par william voirol

Toutes les sources de la catégorie Trucs & Astuces

Sources en rapport avec celle ci

CONVERTISSEUR DE MESURES D'ANGLES par FasteX_

CONVERTISSEUR BBCODE EN HTML par WindPowa

CONVERTISSEUR MULTIPLE par abdelaziz_info

Commentaires et avis

Commentaire de andree46 le 16/02/2012 12:56:33 10/10

salut
cela peut sembler trivial aux pros.
Pour le débutant c'est en 100 lignes d'html et js la solution pleinement opérationnelle et au combien mille fois plus praticable que les solutions online, les logs plus ou moins fiables ou les bidouillage comme passer par un .MHT

Cela mérite grand merci
ANdré

Commentaire de kazma le 16/02/2012 18:59:23 administrateur CS

je vient d'y ajouter la visualisation des images sous forme de miniature a cote du nom

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Convertisseur HTML en BBCode [ par Phil_Free ] Bonjour à tous,Je cherche un script qui permette de convertir un texte HTML en BBCode.Mon but:- J'ai réalisé un long article en HTML et je dois mainte

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP