upload avec jquery

**fahdijbeli** · 05/11/2012, 02h42

bonjour,
mon application est simple

j'ai utilisé la balise pour parcourir mes images situé dans mon ordinateur <input type=file> lorsque je click sur une image je veux l'afficher j'ai pu récupéré le nom de cette image mais pour l'afficher sur le site je sais pas sans l'utilsation d'un script serveur comme php et enfin le client valider l'upload dans le cas de l'upload je peux le faire. le probléme donc lorsque le client click sur une image l'afficher sans utiliser le script serveur

comme par exemple vous modifiez l'image de votre profil .
quelqu'un peut me donner une maniére de faire ça et merci d'avance .

**SpaceFrog** · 05/11/2012, 08h27

Je ne vois pas comment tu pourrais uploader une image sur le serveur sans langage serveur...
Sauf à héberger l'image ailleurs et faire un lien vers l'image hébergée.

**Bovino** · 05/11/2012, 08h33

Non, je crois qu'il veut d'abord uploader en local !

**marcha** · 06/11/2012, 16h44

Salut,

Si tu veux faire un aperçu de l'image avant l'upload, utilise l'API File et l'objet Canvas. (Requière un navigateur moderne)

EDIT: Voici un petit exemple

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
 
<!DOCTYPE html>
<html lang='fr'>
<head>
<title>Test Canvas File API</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src='jquery-1.8.1.min.js'></script>
<script type='text/javascript'>
 
$(function() {
	$('#frm input[type="file"]').change(function() {
		var file = $(this);
 		var reader = new FileReader;
 
		reader.onload = function(event) {
	    		var img = new Image();
 
        		img.onload = function() {
				var ratio = img.width / img.height;
				var width = 100;
				var height = Math.round(width / ratio);
				var canvas = $('<canvas></canvas>').attr({ width: width, height: height });
				file.after(canvas);
				var context = canvas[0].getContext('2d');
	        	    	context.drawImage(img, 0, 0, width, height);
			};
 
        		img.src = event.target.result;
    		};
 
    		reader.readAsDataURL(file[0].files[0]);
	});
});
 
</script>
<style type='text/css'>
canvas { border: 1px solid #ccc; }
</style>
</head>
<body>
<form id='frm'>
	<input type='file' />
</form>
</body>
</html>