Hoe upload ik een bestand naar mijn PHP script met Ajax
Maar alle voorbeelden die ik vind gebruiken geen jQuery Post dus ik kom er niet uit.
Wanneer ik nu de inhoud log van de fileinput zie ik: C:\fakepath\filenaam.jpg
Hoe kan ik een bestand doorsturen naar een PHP script? Het uploaden als ik eenmaal iets bruikbaars heb moet wel lukken, het gaat me alleen om deze eerste stap.
Dit heb ik tot nu toe:
HTML:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<div class="form-group row">
<label for="example-text-input" class="col-sm-4 col-form-label">Logo</label>
<div class="col-sm-8" id="drop">
<input type="file" id="filesinput" name="upl" class="filestyle" data-buttonname="btn-secondary">
</div>
</div>
<label for="example-text-input" class="col-sm-4 col-form-label">Logo</label>
<div class="col-sm-8" id="drop">
<input type="file" id="filesinput" name="upl" class="filestyle" data-buttonname="btn-secondary">
</div>
</div>
Ajax:
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
// Add/edit companies script
$( "#companywrap" ).on("click", "#savecompany", function( event ) {
// Stop normal form behaviour
event.preventDefault();
var $form = $("#companyform"),
$id = $form.find( "input[name='id']" ).val(),
$name = $form.find( "input[name='name']" ).val(),
$username = $form.find( "input[name='username']" ).val(),
$street = $form.find( "input[name='street']" ).val(),
$zip = $form.find( "input[name='zip']" ).val(),
$place = $form.find( "input[name='place']" ).val(),
$phone = $form.find( "input[name='phone']" ).val(),
$contact = $form.find( "input[name='contact']" ).val(),
$email = $form.find( "input[name='email']" ).val(),
$advisors = $form.find( "input[name='advisors']" ).val(),
$logo = $form.find( "input[name='upl']" ),
url = $form.attr( "action" );
var posting = $.post( url, {
id: $id,
name: $name,
username: $username,
street: $street,
zip: $zip,
place: $place,
phone: $phone,
contact: $contact,
email: $email,
advisors: $advisors,
logo: $logo,
});
// Show result in a div
posting.done(function( data ) {
$( ".resultmessage" ).empty().slideDown('fast').append( data );
console.log($logo);
});
});
$( "#companywrap" ).on("click", "#savecompany", function( event ) {
// Stop normal form behaviour
event.preventDefault();
var $form = $("#companyform"),
$id = $form.find( "input[name='id']" ).val(),
$name = $form.find( "input[name='name']" ).val(),
$username = $form.find( "input[name='username']" ).val(),
$street = $form.find( "input[name='street']" ).val(),
$zip = $form.find( "input[name='zip']" ).val(),
$place = $form.find( "input[name='place']" ).val(),
$phone = $form.find( "input[name='phone']" ).val(),
$contact = $form.find( "input[name='contact']" ).val(),
$email = $form.find( "input[name='email']" ).val(),
$advisors = $form.find( "input[name='advisors']" ).val(),
$logo = $form.find( "input[name='upl']" ),
url = $form.attr( "action" );
var posting = $.post( url, {
id: $id,
name: $name,
username: $username,
street: $street,
zip: $zip,
place: $place,
phone: $phone,
contact: $contact,
email: $email,
advisors: $advisors,
logo: $logo,
});
// Show result in a div
posting.done(function( data ) {
$( ".resultmessage" ).empty().slideDown('fast').append( data );
console.log($logo);
});
});
Als je .readAsDataURL() gebruikt krijg je een data URL terug, wat eigenlijk gewoon een base64 gecodeeerde versie van je bestand is - met een kleine header. Die header knip je d'r als volgt af:
Code (php)
1
var $logo = reader.result.substr(reader.result.indexOf(',') + 1)
Als je dit meegeeft in je async call (zoals je nu al doet voor $logo), dan kun je aan de PHP kant iets doen van:
Code (php)
1
file_put_contents($filename,base64_decode($_POST['logo']));
Maar dan uiteraard met wat meer checks, en de afbeelding evt. nog knippen & schalen.
Let op: het bestand zit nu dus "gewoon" in de $_POST, en niet meer in de $_FILES!
Gewijzigd op 20/06/2018 12:37:14 door Rob Doemaarwat
Toevoeging op 20/06/2018 14:43:18:
Werkt dat ook in IE bijvoorbeeld?
Vanaf IE10 (die paar prutsers die nog een oudere versie hebben zijn waarschijnlijk wel gewend dat de meeste sites niet of nauwelijks werken ...)