Image Array wijzigen
Hey,
Ik ben bezig met een project waar gebruikers een aantal afbeeldingen kan uploaden, de bestandsnamen worden vervolgens gewijzigd in een unieke string.
waar ik een klein beetje vast loop is het wijzigen van de afbeeldingen.
ik heb dus een array met (Bijvoorbeeld: 5) bestandsnamen, maar er moet een mogelijkheid zijn dat een gebruiker 1 afbeelding kan verwijderen en er ook weer paar bij kan uploaden op een pagina en dat dit allemaal bij submit word verwerkt.
Het schrijven van de code heb ik geen moeite mee, mijn vraag is hoe ik dit op een nette manier kan doen.
Moet ik bij het weergeven van iedere afbeeldingen ook een hidden input printen met daar in een als value de bestandsnaam. of is hier een beter alternatief.
ik sta open voor alle suggesties
Ik ben bezig met een project waar gebruikers een aantal afbeeldingen kan uploaden, de bestandsnamen worden vervolgens gewijzigd in een unieke string.
waar ik een klein beetje vast loop is het wijzigen van de afbeeldingen.
ik heb dus een array met (Bijvoorbeeld: 5) bestandsnamen, maar er moet een mogelijkheid zijn dat een gebruiker 1 afbeelding kan verwijderen en er ook weer paar bij kan uploaden op een pagina en dat dit allemaal bij submit word verwerkt.
Het schrijven van de code heb ik geen moeite mee, mijn vraag is hoe ik dit op een nette manier kan doen.
Moet ik bij het weergeven van iedere afbeeldingen ook een hidden input printen met daar in een als value de bestandsnaam. of is hier een beter alternatief.
ik sta open voor alle suggesties
Dat ligt er maar net aan hoe je het wilt maken. Wil je voor elke afbeelding een knop of wil je dat de gebruiker meerdere afbeeldingen kan selecteren en dan op de knop verwijderen kan drukken?
Dat laatste gaat het gemakkelijkste met een checkbox bij elke afbeelding.
<input type="checkbox" name="selected[]" value="unieke_string" />
$_POST['selected'] word nu een array met daarin alle geselecteerde afbeeldingen.
Dat laatste gaat het gemakkelijkste met een checkbox bij elke afbeelding.
<input type="checkbox" name="selected[]" value="unieke_string" />
$_POST['selected'] word nu een array met daarin alle geselecteerde afbeeldingen.
TNG - op 15/06/2012 11:01:32:
...
maar er moet een mogelijkheid zijn dat een gebruiker 1 afbeelding kan verwijderen en er ook weer paar bij kan uploaden op een pagina en dat dit allemaal bij submit word verwerkt.
...
maar er moet een mogelijkheid zijn dat een gebruiker 1 afbeelding kan verwijderen en er ook weer paar bij kan uploaden op een pagina en dat dit allemaal bij submit word verwerkt.
...
- Wil je dit allemaal regelen met jacvascript, vooraleer de gebruiker de images heeft geüploadet?
- Of eerst uploaden; de status op pending zetten (of zoiets); daarna ziet de gebruiker het voorlopige resultaat op de server, eventueel dus met de oude bestandsnaam ....; dan aanpassingen doen.
Optie 1 kon vroeger niet. HTML5 maakt dit tegenwoordig wel mogelijk. Je kan files (eventueel meerdere tegelijk) drag/droppen in een div.
-> Files die in het geheugen van javascript zitten; daar heb je tegenwoordig veel meer controle over. Je kan image files ook op het scherm van de gebruiker tonen (preview), de file properties lezen, ...
En dat dus allemaal vooraleer de gebruiker iets moet uploaden
Oeps sorry daar had ik dus eventjes overheen gelezen.
Hey Heren,
dank voor de snelle reacties!
Ik ga voor de checkbox oplossing in combinatie met een ajax script wat er voor zorgt dat de afbeeldingen upload. zodra deze wordt gesubmit word de array opgebouwd en weggeschreven.
dank voor de snelle reacties!
Ik ga voor de checkbox oplossing in combinatie met een ajax script wat er voor zorgt dat de afbeeldingen upload. zodra deze wordt gesubmit word de array opgebouwd en weggeschreven.
Bekijk dit eens; dit kan helpen qua inspiratie:
Je kan die e.dataTransfer.files opvangen, in een var opslaan, ...
Hier vind je een demo waarmee je die files asynchroon kan uploaden
http://blogs.sitepointstatic.com/examples/tech/filedrag/3/index.html
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
38
39
40
41
42
43
44
45
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="en">
<head>
<meta charset=utf-8>
<title>HTML5 Demo: Drag and drop</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
function imagesSelected(myFiles) {
for (var i = 0, f; f = myFiles[i]; i++) {
var imageReader = new FileReader();
imageReader.onload = (function(aFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join('');
document.getElementById('thumbs').insertBefore(span, null);
};
})(f);
imageReader.readAsDataURL(f);
}
}
function dropIt(e) {
imagesSelected(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}
</script>
<style>
.images {
max-width: 400px;
max-height: 400px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td align="left" height="105" width="105" ondragenter="return false" ondragover="return false" ondrop="dropIt(event)">
<output id="thumbs"></output>
</td>
</tr>
</table>
<p class="drag">Hello</p>
</body>
</html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>HTML5 Demo: Drag and drop</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
function imagesSelected(myFiles) {
for (var i = 0, f; f = myFiles[i]; i++) {
var imageReader = new FileReader();
imageReader.onload = (function(aFile) {
return function(e) {
var span = document.createElement('span');
span.innerHTML = ['<img class="images" src="', e.target.result,'" title="', aFile.name, '"/>'].join('');
document.getElementById('thumbs').insertBefore(span, null);
};
})(f);
imageReader.readAsDataURL(f);
}
}
function dropIt(e) {
imagesSelected(e.dataTransfer.files);
e.stopPropagation();
e.preventDefault();
}
</script>
<style>
.images {
max-width: 400px;
max-height: 400px;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td align="left" height="105" width="105" ondragenter="return false" ondragover="return false" ondrop="dropIt(event)">
<output id="thumbs"></output>
</td>
</tr>
</table>
<p class="drag">Hello</p>
</body>
</html>
Je kan die e.dataTransfer.files opvangen, in een var opslaan, ...
Hier vind je een demo waarmee je die files asynchroon kan uploaden
http://blogs.sitepointstatic.com/examples/tech/filedrag/3/index.html




