input file verzenden met javascript
ik heb een formuliertje gemaakt waar mensen ook een foto kunnen toevoegen.
bij de knop verzenden worden de gegevens via javascript naar php verstuurd. nu worden alle naam en tekst velden netjes verwerkt maar helaas de foto niet . dit loopt vast bij het javascript weet iemand wat ik hier moet aanpassen ?
alvast bedankt voor je reactie
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
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
<?php
function registreer(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
var url = "http://localhost:8080/verwerkregistratie.php";
var bedrijfsnaam = document.getElementById("bedrijfsnaam").value;
var straat = document.getElementById("straat").value;
var postcode = document.getElementById("postcode").value;
var postcodeletter = document.getElementById("postcodeletter").value;
var plaats = document.getElementById("plaats").value;
var land = document.getElementById("land").value;
var naam = document.getElementById("naam").value;
var telefoonnummer = document.getElementById("telefoonnummer").value;
var emailadres = document.getElementById("emailadres").value;
var wachtwoord = document.getElementById("wachtwoord").value;
var passwordcheck = document.getElementById("passwordcheck").value;
var algvw = document.getElementById("algvw").value;
var foto= document.getElementById("foto").value;
var vars = "bedrijfsnaam="+bedrijfsnaam+"&straat="+straat+"&postcode="+postcode+"&postcodeletter="+postcodeletter+"&plaats="+plaats+"&land="+land+"&naam="+naam+"&telefoonnummer="+telefoonnummer+"&emailadres="+emailadres+"&wachtwoord="+wachtwoord+"&passwordcheck="+passwordcheck+"&algvw="+algvw+"&foto="+foto;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("output").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("output").innerHTML = "processing...";
}
?>
function registreer(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
var url = "http://localhost:8080/verwerkregistratie.php";
var bedrijfsnaam = document.getElementById("bedrijfsnaam").value;
var straat = document.getElementById("straat").value;
var postcode = document.getElementById("postcode").value;
var postcodeletter = document.getElementById("postcodeletter").value;
var plaats = document.getElementById("plaats").value;
var land = document.getElementById("land").value;
var naam = document.getElementById("naam").value;
var telefoonnummer = document.getElementById("telefoonnummer").value;
var emailadres = document.getElementById("emailadres").value;
var wachtwoord = document.getElementById("wachtwoord").value;
var passwordcheck = document.getElementById("passwordcheck").value;
var algvw = document.getElementById("algvw").value;
var foto= document.getElementById("foto").value;
var vars = "bedrijfsnaam="+bedrijfsnaam+"&straat="+straat+"&postcode="+postcode+"&postcodeletter="+postcodeletter+"&plaats="+plaats+"&land="+land+"&naam="+naam+"&telefoonnummer="+telefoonnummer+"&emailadres="+emailadres+"&wachtwoord="+wachtwoord+"&passwordcheck="+passwordcheck+"&algvw="+algvw+"&foto="+foto;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("output").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("output").innerHTML = "processing...";
}
?>
Edit:
Titel aangepast om verwarring tussen JAVA en JavaScript te voorkomen.
Beiden zijn overigens totaal verschillende programmeertalen...
Beiden zijn overigens totaal verschillende programmeertalen...
Toevoeging op 11/07/2013 08:45:02:
je heb gelijk Aar
Gewijzigd op 11/07/2013 08:42:26 door - Ariën -
Je kan dit wel simuleren, door met een (verborgen) iframe te werken.
Dan houd het op
Het is met javascript ook niet moeilijk, je verstuurt het formulier naar het iframe, en met javascript kun je vanuit dat iframe de elementen in het bovenliggende document manipuleren.
Er zijn best wel wat voorbeeldjes te vinden, bv. hier
Het is wel wat zoeken om het goed te krijgen.
Vanuit dit artikel: http://blog.new-bamboo.co.uk/2012/01/10/ridiculously-simple-ajax-uploads-with-formdata
heb ik dit samengesteld (ingekort; zodat je niet te veel afgeleid wordt)
TO DO: maak een mapje "uploads"; daar komen de uploads. (of pas lijn 11 van upload.php aan...)
index.php
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
<form id="the-form" method="post" action="upload.php" enctype="multipart/form-data" onsubmit="return form_submit(this)">
<input name="username" placeholder="username"><br>
<input id="the-file" name="file" type="file"><br>
<input type="submit" value="Upload" />
</form>
<div id="message"></div>
<script>
// The Javascript
function form_submit() {
var formData = new FormData(form);
var form = document.getElementById('the-form');
var file = document.getElementById('the-file').files[0];
formData.append('file', file);
var xhr = new XMLHttpRequest();
// Add any event handlers here...
xhr.open('POST', form.getAttribute('action'), true);
xhr.addEventListener('readystatechange', onreadystatechangeHandler, false);
xhr.send(formData);
return false; // To avoid actual submission of the form
}
// Handle the response from the server
function onreadystatechangeHandler(evt) {
var status = null;
try {
status = evt.target.status;
}
catch(e) {
return;
}
if (status == '200' && evt.target.responseText) {
document.getElementById('message').innerHTML = evt.target.responseText ; // bericht van de server
}
}
</script>
<input name="username" placeholder="username"><br>
<input id="the-file" name="file" type="file"><br>
<input type="submit" value="Upload" />
</form>
<div id="message"></div>
<script>
// The Javascript
function form_submit() {
var formData = new FormData(form);
var form = document.getElementById('the-form');
var file = document.getElementById('the-file').files[0];
formData.append('file', file);
var xhr = new XMLHttpRequest();
// Add any event handlers here...
xhr.open('POST', form.getAttribute('action'), true);
xhr.addEventListener('readystatechange', onreadystatechangeHandler, false);
xhr.send(formData);
return false; // To avoid actual submission of the form
}
// Handle the response from the server
function onreadystatechangeHandler(evt) {
var status = null;
try {
status = evt.target.status;
}
catch(e) {
return;
}
if (status == '200' && evt.target.responseText) {
document.getElementById('message').innerHTML = evt.target.responseText ; // bericht van de server
}
}
</script>
upload.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?php
/**
* @file Ajax upload
* alles wat je print (echo) wordt als bericht naar Ajax teruggestuurd
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$file_name = $_FILES["file"]["name"];
// extensie zoeken
list( $dirname, $basename, $extension, $filename ) = array_values( pathinfo($_FILES["file"]['name']) );
if (in_array(strtolower($extension), array('jpg', 'jpeg', 'png', 'gif'))) { // controleren dat het een toegelaten extensie is
$destination = 'uploads/' . $basename;
if(move_uploaded_file ($_FILES["file"]["tmp_name"], $destination)) {
echo 'File uploaded: ' . $_FILES["file"]["name"];
}
else {
echo -1;
}
}
}
?>
/**
* @file Ajax upload
* alles wat je print (echo) wordt als bericht naar Ajax teruggestuurd
*/
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
$file_name = $_FILES["file"]["name"];
// extensie zoeken
list( $dirname, $basename, $extension, $filename ) = array_values( pathinfo($_FILES["file"]['name']) );
if (in_array(strtolower($extension), array('jpg', 'jpeg', 'png', 'gif'))) { // controleren dat het een toegelaten extensie is
$destination = 'uploads/' . $basename;
if(move_uploaded_file ($_FILES["file"]["tmp_name"], $destination)) {
echo 'File uploaded: ' . $_FILES["file"]["name"];
}
else {
echo -1;
}
}
}
?>
Gewijzigd op 11/07/2013 12:58:04 door Kris Peeters
Als ik op mozzila.org kijk zie ik dat dit door IE versies lager dan 10 niet ondersteund wordt!. Ik weet niet of die info klopt, maar lijkt me toch wel belangrijk.
Gewijzigd op 11/07/2013 17:31:50 door Ger van Steenderen
Om goed te zijn, zou men nog extra beveiliging moeten toevoegen.
Een aantal try/catch'en of zo.
Ik zou het zelf nog eens deftig moeten bekijken
Even uit nieuwsgierigheid, gebruik jij nog veel plain javascript?