Hoe upload ik een bestand naar mijn PHP script met Ajax

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Snelle Jaap

Snelle Jaap

20/06/2018 10:48:05
Quote Anchor link
Ik probeer een script te maken zodat iemand een logo kan uploaden.

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)
PHP script in nieuw venster Selecteer het PHP script
1
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>


Ajax:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
// 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);
  });
});
 
PHP hulp

PHP hulp

29/03/2024 10:51:34
 
Rob Doemaarwat

Rob Doemaarwat

20/06/2018 12:35:33
Quote Anchor link
D'r zijn tal van standaard tooltjes te downloaden als je bestanden asynchroon wilt uploaden. Als je 'm perse samen met de rest van de data wilt uploaden (zoals hierboven), of gewoon zin hebt in een leuke uitdaging: volgens mij ben je op zoek naar de JavaScript FileReader API. Hier staat het redelijk netjes uitgelegd (incl de javascript code) http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api , maar Googel het anders maar.

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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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
 
Snelle Jaap

Snelle Jaap

20/06/2018 14:43:18
Quote Anchor link
Werkt dat ook in IE bijvoorbeeld?

Toevoeging op 20/06/2018 14:43:18:

Werkt dat ook in IE bijvoorbeeld?
 
Thomas van den Heuvel

Thomas van den Heuvel

20/06/2018 15:03:07
Quote Anchor link
Heb je dat geprobeerd? Loop je tegen problemen aan?
 
Rob Doemaarwat

Rob Doemaarwat

20/06/2018 17:18:31
Quote Anchor link
https://caniuse.com/#feat=filereader

Vanaf IE10 (die paar prutsers die nog een oudere versie hebben zijn waarschijnlijk wel gewend dat de meeste sites niet of nauwelijks werken ...)
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.