Maak lijst met JS en upload die.
Ik heb eerder geprobeerd om meteen zodra een bestand via een <input type="file"> veld geselecteerd word, deze meteen te uploaden. Dit is overigens gewoon gelukt.
Nu heb ik in de praktijk erachter gekomen dat dit niet zo handig is voor het doel waar het voor gebruikt word.
Wat ik graag zou willen is zodra een bestand word geselecteerd, deze in een lijst komt gemaakt door JS, dus deze moet meteen bijgewerkt worden.
Zodra het form word gesubmit, moet op 1 of andere manier PHP via $_FILE al die bestanden kunnen uploaden.
Het probleem is nu dat ik niet weet hoe ik dit voor elkaar moet krijgen.
Is er iemand die me opweg kan helpen?
Alvast bedankt!
"in principe kan dat niet"
Met Javascript kan je geen acties ondernemen op lokale bestanden. Het enige wat je kan doen als het gaat om lokale bestanden is ze uploaden via een file input. Je kan zelfs niets eens het hele pad van het bestand uitlezen. Je kan wel de bestandsnaam uitlezen, maar meer niet. Als je dus een voor een de bestanden laat selecteren in een file input, die bestandsnamen opslaat in een array en dan uiteindelijk de hele lijst wilt verzenden dan gaat je dat niet lukken. Ofwel je stuurt alleen de laatst geselecteerde (die nog in de file input staat), ofwel je verstuurt alleen de bestandsnamen, maar daar heb je natuurlijk helemaal niets aan.
Wat wel kan, is op de achtergrond met verschillende file inputs werken. Je laat bijvoorbeeld een knop zien met "Selecteer bestand" en als er op geklikt wordt dan creeer je een (verborgen) file input, simuleer je de klik erop (waardoor de file open dialoog wordt geopend) en als de gebruiker een bestand selecteert dan laat je de naam nog zien in een tabel.
De hidden file input laat je gewoon intact, want die heb je nog nodig om het bestand te versturen. Als je ze namelijk allemaal in een form zet (allemaal in een form, of elke in een eigen form) dan kan je als de gebruiker op een knop "upload alle bestanden" klikt vanuit de click handler van die knop alle forms versturen.
Enigzins te volgen? Probeer het eens, anders kan ik nog wel wat voorbeeld code geven.
Ik snap wat je bedoelt, alleen zou je opweg kunnen helpen met het hele idee?
Zoals ik het begrijp, moet er een knop komen om dingen te uploaden. Zodra hier op geklikt word, word dit 'geredirect' naar de file input knop (die niet zichtbaar is, maar wel in de form staat). Hierdoor, komt het bestand dus in de form te staan.
Zodra het bestand geselecteerd is, word er een nieuwe? input veld aangemaakt in het form die ook niet zichtbaar is, en word de upload button daar aan gelinkt.
Is dat een beetje wat je bedoelt?
Voor images zijn de mogelijkheden wat minder streng geworden.
bv. javascript kan nu thumbnails maken. Dit dus met bestanden die lokaal staan bij de gebruiker.
Javascript kan ook meer gegevens van de file lezen.
Die files in een wachtrij zetten en rustig in de achtergrond laten uploaden, lukt nu wel.
Een lijst maken met de geselecteerde bestanden, bij elk een checkbox ... bij onSubmit enkel de gecheckte bestanden asynchroon uploaden ...
Dat moet nu wel lukken tegenwoordig.
1 ding blijft sowieso wel gelden: een HTML-file-element kan enkel een waarde krijgen die door de gebruiker zelf is gezet.
Je kan javascript niet gebruiken om zelf te snuffelen naar bestanden van de gebruiker.
Als voorbeeld. Stel je hebt het volgende form in je HTML pagina:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<form id="upload_form">
<input type="file" name="file0">
</form>
<!-- selecteer een bestand button, staat buiten het form! -->
<input type="submit" id="selecteer" value="Select een bestand">
<input type="file" name="file0">
</form>
<!-- selecteer een bestand button, staat buiten het form! -->
<input type="submit" id="selecteer" value="Select een bestand">
En ga er even vanuit dat je een css hebt waarin het form op "display: none" wordt gezet zodat je dat niet ziet.
Als de gebruiker nu op de knop klikt wil je dat het open dialoog van het laatste (!!) file input in het form wordt geopend. Dat kan op de volgende manier:
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function(){
$("#selecteer").click(function(){
$("#upload_form file[type=input]").last().click();
});
});
$("#selecteer").click(function(){
$("#upload_form file[type=input]").last().click();
});
});
Wat je hier dus doet is je selecteert met JQuery de file inputs in het form, pakt daarvan de laatste (last()) en triggered de click functie van die file input, daarmee open je de file open dialoog.
Vervolgens kan je de change van die file input afvangen als volgt:
Code (php)
1
2
3
4
5
2
3
4
5
$(document).ready(function(){
$("#upload_form file").on("change", "input[type=file]", function(){
//een file upload is veranderd, doe iets met het geselecteerde bestand
});
});
$("#upload_form file").on("change", "input[type=file]", function(){
//een file upload is veranderd, doe iets met het geselecteerde bestand
});
});
Hier gebruik ik dus de "on()" functie zodat ook de dynamische gecreeerde file inputs deze actie zullen triggeren.
Wat je dan in de change kan doen is de naam van het bestand uitlezen en die in een tabel stoppen, zodat de gebruiker kan zien welke bestanden allemaal zijn geselecteerd. Daarna maak je een nieuwe input aan ($("#upload_form file").append('<input type="file" name="file1">')) waardoor de hele loop voor die gaat werken. Klikt de gebruiker nu namelijk nogmaals op de selecteer button dan wordt deze nieuwe input aangesproken. Enzovoorts, enzovoorts. Je moet alleen even een inventieve manier vinden om ervoor te zorgen dat de namen van de file inputs niet hetzelfde worden, maar een simpel countertje zou niet al te moeilijk moeten zijn.
Toevoeging op 06/03/2012 18:05:05:
Kris Peeters op 06/03/2012 17:56:01:
Een lijst maken met de geselecteerde bestanden, bij elk een checkbox ... bij onSubmit enkel de gecheckte bestanden asynchroon uploaden ...
Dat moet nu wel lukken tegenwoordig.
Dat moet nu wel lukken tegenwoordig.
Ik zou graag een voorbeeld hiervan zien. Hoe zorg je er dan voor dat de juiste bestanden mee gaan als je niets met het bestand zelf kunt doen?
Ik heb even gekeken naar je voorbeelden en het geprobeerd, maar het lukt me niet om het werkend te krijgen.
Zodra er op de knop word geklikt, gebeurt er niks. Ook als ik de on change functie erin zet, en gewoon op bladeren druk in de input field en een bestand selecteer, gebeurt er niks.
Ik heb op het moment het volgende.
JS (in <head>)
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
<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#selecteer").click(function(){
$("#upload_form file[type=input]").last().click();
});
});
</script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#selecteer").click(function(){
$("#upload_form file[type=input]").last().click();
});
});
</script>
HTML (in <body>)
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<form id="upload_form" style="display:none;">
<input type="file" name="file0" />
</form>
<!-- selecteer een bestand button, staat buiten het form! -->
<input type="submit" id="selecteer" value="Select een bestand" />
<input type="file" name="file0" />
</form>
<!-- selecteer een bestand button, staat buiten het form! -->
<input type="submit" id="selecteer" value="Select een bestand" />
Edit
Ik heb ff wat zitte prutsen, en heb het volgende veranderd:
Code (php)
1
2
2
//$("#upload_form file[type=input]").last().click();
$("#upload_form input[type=file]").last().click();
$("#upload_form input[type=file]").last().click();
Nu werkt het wel =].
Ik ga hier even mee veder testen. Alvast bedankt!
Gewijzigd op 06/03/2012 18:35:32 door Cake Masher
Dit is strikt voorbehouden voor de gebruiker.
Via de knop; bij sommige browsers kan je het pad schrijven; tegenwoordig zijn er mooie drag/drop-mogelijkheden.
Maar eens de gebruiker de value van de input heeft geset, kan javascript wel veel meer dan vroeger.
Ik zal zien of ik wat concrete voorbeelden kan geven.
Cake Masher op 06/03/2012 18:14:33:
Nu werkt het wel =].
Code (php)
1
2
2
//$("#upload_form file[type=input]").last().click();
$("#upload_form input[type=file]").last().click();
$("#upload_form input[type=file]").last().click();
Nu werkt het wel =].
*&#*(&^%# dat was inderdaad mijn haastige spoed.... sorry :-)
Waar ik nu wel tegen aan loop, is zodra ik een bestand heb geselecteer en het form submit, hij het bestand niet mee stuurt.
Als ik het zelfde, of een ander bestand via het normale 'bladeren' knopje selecteer en via de zelfde manier submit, stuurt hij het bestand wel mee.
Edit
Ook als ik via jquery / js een veld toevoeg, word deze niet weergeven zodra ik het form submit. Hier liep ik vorige keer volgens mij ook op vast.
Gewijzigd op 06/03/2012 19:09:30 door Cake Masher
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
JS:
<script type="text/javascript">
$(document).ready(function ()
{
$("#selecteer").click(function(){
$("#upload_form input[type=file]").last().click();
});
$("#submit").click (function(){
$("form").submit();
});
});
</script>
HTML:
<form method="post" action="index.php" enctype="multipart/form-data" id="upload_form">
<input type="file" name="file0" />
</form>
<!-- selecteer een bestand button, staat buiten het form! -->
<input type="button" id="selecteer" value="Select een bestand" /><br />
<input type="button" id="submit" value="Submit" />
<script type="text/javascript">
$(document).ready(function ()
{
$("#selecteer").click(function(){
$("#upload_form input[type=file]").last().click();
});
$("#submit").click (function(){
$("form").submit();
});
});
</script>
HTML:
<form method="post" action="index.php" enctype="multipart/form-data" id="upload_form">
<input type="file" name="file0" />
</form>
<!-- selecteer een bestand button, staat buiten het form! -->
<input type="button" id="selecteer" value="Select een bestand" /><br />
<input type="button" id="submit" value="Submit" />
Ik heb het ook al geprobeerd door een normale submit knop binnen de form te plaatsten, en '$("form").' veranderen naar '$("#upload_form").' geeft het zelfde effect.
En bovenaan de pagina staat
Code (php)
Gewijzigd op 06/03/2012 19:39:30 door Cake Masher
De JS bestanden bestaan gewoon en de path erheen klopt ook.
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
46
47
48
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
46
47
48
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
echo "<pre>";
print_r ($_POST);
print_r ($_FILES);
echo "</pre>";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test</title>
<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#selecteer").click(function(){
$("#upload_form input[type=file]").last().click();
});
$("#submit").click (function(){
$("form").submit();
});
});
</script>
</head>
<body>
<form method="post" action="index.php" enctype="multipart/form-data" id="upload_form">
<input type="file" name="file0" />
</form>
<!-- selecteer een bestand button, staat buiten het form! -->
<input type="button" id="selecteer" value="Select een bestand" /><br />
<input type="button" id="submit" value="Submit" />
</body>
</html>
if ($_SERVER['REQUEST_METHOD'] == 'POST')
{
echo "<pre>";
print_r ($_POST);
print_r ($_FILES);
echo "</pre>";
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Test</title>
<script type="text/javascript" src="jquery-1.7.1.min.js" ></script>
<script type="text/javascript" src="jquery-ui-1.8.17.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$("#selecteer").click(function(){
$("#upload_form input[type=file]").last().click();
});
$("#submit").click (function(){
$("form").submit();
});
});
</script>
</head>
<body>
<form method="post" action="index.php" enctype="multipart/form-data" id="upload_form">
<input type="file" name="file0" />
</form>
<!-- selecteer een bestand button, staat buiten het form! -->
<input type="button" id="selecteer" value="Select een bestand" /><br />
<input type="button" id="submit" value="Submit" />
</body>
</html>
demo:
http://demo.tutorialzine.com/2011/09/html5-file-upload-jquery-php/
source code:
http://code.google.com/p/scigest/source/browse/src/main/webapp/js/filedrag.js?spec=svn9b8a75293177dfa378f3ad5a73470bdfa11d6118&r=9b8a75293177dfa378f3ad5a73470bdfa11d6118
Je ziet duidelijk hoe de thumbnail gemaakt wordt terwijl de upload nog bezig is. Dit is dus puur HTML5/javascript.
Het moet mogelijk zijn dit om te vormen naar eigen wensen.
Het punt is nu dat ik graag wil dat als ik een bestand selecteer, deze ergens neer gezet word en mee word gestuurd naar de 'submit pagina' zodat ik de files kan uploaden nadat het form is gesubmit.
Op een of andere rare reden worden mijn files niet mee gestuurd naar php via $_FILES of $_POST als ik een bestand selecteer via jquery. Als ik dit zonder jquery doe (dus gewoon op bladeren druk), dan stuurt hij ze wel mee. Terwijl jquery eigenlijk ook op bladeren drukt voor je, als het ware..
@Erwin, zou je dat script wat ik had eens kunnen kopieëren en die testen? (als je zin / tijd hebt). Kijken of het bij jou wel werkt. Als dat 't geval is, is mijn jquery lib. niet goed, of iets anders manipuleert het.
Als ik nieuws heb, laat ik het weten.
De code die je hebt geplaatst werkt bij mij gewoon. Ik heb twee dingen moeten aanpassen; de JQuery link (ik heb nu gebruik gemaakt van de Google hosted library) en de action parameter in het form (omdat ik een andere bestandsnaam had).
Hier trouwense de link naar de Google hosted JQuery library, probeer het daar eens mee:
https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
@Kris
Die upload demo ziet er inderdaad wel erg leuk uit. Uiteraard wel jammer dat het alleen in FF en Chrome werkt.
Ik heb even dezelfde library gebruikt die je me gaf, maar het werkt nog steeds niet.
Als ik via bladeren een bestand selecteer en vervolgens via jquery de form submit, werkt hij gewoon en stuurt hij het bestand mee.
Als ik via jquery het bestand selecteer, en vervolgens via jquery de form submit, stuurt hij niks mee, of hij submit hem gewoon niet. De input veld word wel geleegd.
Als ik nou eerst probeer via jquery een bestand te selecteren en daarna submit via jquery, en vervolgens probeer ik het nog een keer, alleen dan via bladeren (nadat ik dus via jquery heb geprobeerd), dan werkt het ook niet.
Het werkt dus alleen zodra ik de pagina laad, en via bladeren een bestand selecteer & submit via jquery.
Ik test overigens in IE9.