js foto bekijken voor het uploaden
ik ben bezig met een site waar je een foto kan uploaden
dat lukt allemaal al alleen nu wil ik dat je je foto kan zien
voordat hij gaat uploaden ik heb nu dit:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<script type="text/javascript">
document.getElementById("picture") = '<img id="pref" src="'+ input +'" alt="your image" />';
</script>
</head>
<body>
<div id="picture">
</div>
<input type="file" name="picture" onchange="readURL(this.value)" id="uploadfile" />
</body>
</html>
<head>
<script type="text/javascript">
document.getElementById("picture") = '<img id="pref" src="'+ input +'" alt="your image" />';
</script>
</head>
<body>
<div id="picture">
</div>
<input type="file" name="picture" onchange="readURL(this.value)" id="uploadfile" />
</body>
</html>
weet iemand waarom dit niet werkt?
en nog een vraag hoe kan ik ervoor zorgen dat je alleen .jpg .png .jpeg kan toelaten
(in mijn php heb ik dat al alleen in js een mooie meldig is wat mooier)
Gewijzigd op 16/01/2014 15:30:13 door Christian k
dus dat kan niet toch?
Christian k op 16/01/2014 15:52:42:
ze moeten nog wel aangepast worden(de vorm veranderen als ze bijvoorbeeld rechthoek zijn vierkant maken)
dus dat kan niet toch?
dus dat kan niet toch?
Dat kun je dan doen zodra je het bestand 'verplaatst'. je maakt een nieuwe met aanpassingen en sla je op in een andere map en die in de temp verwijder je dan weer.
ik heb gelezen dat dit wel kan namelijk
en dat je dan op upload klikt en dat hij dan word geupload
Gewijzigd op 16/01/2014 18:00:00 door christian k
kijk eens hier en hier
Gewijzigd op 17/01/2014 08:24:49 door Michael -
Code (php)
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
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
<html>
<head>
<script>
function readUrl() {
var fileInput = document.getElementById('uploadfile');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerHTML = "";
var img = new Image();
img.src = reader.result;
fileDisplayArea.appendChild(img);
viewpicturebox();
}
reader.readAsDataURL(file);
} else {
fileDisplayArea.innerHTML = "File not supported!";
}
});
}
</script>
</head>
<body>
<div id="light" class="picture_show">
<a href="javascript:void(0)" style="float: right; margin-bottom: 25px;" onclick="closepicturebox()">Close</a><br>
<div id="fileDisplayArea" class="fileDisplayArea">
</div>
</div>
</body>
<head>
<script>
function readUrl() {
var fileInput = document.getElementById('uploadfile');
var fileDisplayArea = document.getElementById('fileDisplayArea');
fileInput.addEventListener('change', function(e) {
var file = fileInput.files[0];
var imageType = /image.*/;
if (file.type.match(imageType)) {
var reader = new FileReader();
reader.onload = function(e) {
fileDisplayArea.innerHTML = "";
var img = new Image();
img.src = reader.result;
fileDisplayArea.appendChild(img);
viewpicturebox();
}
reader.readAsDataURL(file);
} else {
fileDisplayArea.innerHTML = "File not supported!";
}
});
}
</script>
</head>
<body>
<div id="light" class="picture_show">
<a href="javascript:void(0)" style="float: right; margin-bottom: 25px;" onclick="closepicturebox()">Close</a><br>
<div id="fileDisplayArea" class="fileDisplayArea">
</div>
</div>
</body>
het werkt ook alleen komt de foto op ware groote erin te staan
en dat moet niet
ik heb het al met css geprobeert te veranderen maar dat werkte niet
weet iemand hoe ik dat moet doen?
Toevoeging op 17/01/2014 16:01:17:
en het werkt alleen als je dubbel klik op de file doet als je de file
selecteerd en op openen klikt werkt het niet
weet iemand hoe dat kan