Hoe upload ik een bestand naar mijn PHP script met Ajax

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

Senior DevOps-ontwikkelaar eIDAS

Functie­omschrijving Burgers en bedrijven veilig en betrouwbaar digitaal toegang geven tot diensten en producten van het ministerie van Economische Zaken en Klimaat. Als senior DevOps-ontwikkelaar bouw je daar letterlijk aan mee. En dat doe je bij DICTU: een van de grootste en meest vooruitstrevende ICT-dienstverleners van de Rijksoverheid. Jij werkt mee aan de doorontwikkeling van eIDAS, dat staat voor Electronic IDentification Authentication and trust Services. Deze koppeling maakt de grensoverschrijdende authenticatie op overheidswebsites binnen de Europese Unie mogelijk. Het ministerie van Economische Zaken en Klimaat heeft één moderne toegangspoort voor zijn diensten en inspecties. Enkele daarvan zijn dankzij eIDAS inmiddels

Bekijk vacature »

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

Technisch Ontwerper / Applicatie Ontwikkelaar

Technisch Ontwerper / Applicatie Ontwikkelaar Actief Wat ga je doen? Als Technisch Ontwerper / Applicatie Ontwikkelaar kom je te werken bij onze gerenommeerde klanten op projecten of opdrachten van omvang en formaat. Je bent verantwoordelijk voor het omzetten van functionele specificaties naar een technisch ontwerp, het ontwerp van programmaspecificaties voor toepassingen, de realisatie van (gewijzigde) programmaonderdelen en databestanden van toepassingen en de technische systeemtest van applicatietoepassingen. Daarnaast geef je vorm aan webpagina’s en applicaties, stel je gebruikersdocumentatie op en verleen je ondersteuning bij het oplossen van productiefouten. Tevens ben je verantwoordelijk voor het samenstellen en onderhouden van de applicatie c.q.

Bekijk vacature »

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

22/09/2020 13:17:38
 
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.