AJAX image upload

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Business developer

Je gaat aan de slag als business developer. Jij gaat een productgroep promoten die snel groeiend is. wat bieden wij jou Vaste baan Hoeksche Waard: Heinenoord 2500-3500 bruto afhankelijk van ervaring wie ben jij Je beheerst je talen, bent commercieel ingesteld, hebt goede ideeen en kan mensen overtuigen en motiveren. Mbo+ niveau Perfecte beheersing van de Nederlandse taal in woord en geschrift en goede beheersing van de Engelse taal in zowel woord als geschrift De beheersing van de Franse en/of Duitse taal is een pré Kennis van MS Word/Excel of Google Suite, Gmail en eventueel ook Salesforce wat ga je

Bekijk vacature »

Lead Developer in het Spoordomein

Ben jij altijd degene in het team die de knopen doorhakt? Die samen met collega’s de best passende oplossing bepaalt? Wat ga je doen? Als Lead Developer ben je de spil tussen de klant en het ontwikkelteam. Je helpt aan de ene kant de Product Owner met het managen van de backlog en het realiseren van de business doelstellingen. En aan de andere kant zorg je voor een stabiele, flexibele software applicatie van hoge kwaliteit. Je zoekt continu naar verbeteringen in de architectuur, de gebruikte technologieën, het proces en de mensen. Je daagt je team uit om met goede ideeën

Bekijk vacature »

Software Consultant

Ben je graag onder de mensen, goed in het geven van uitleg en wil je werken in een jong team? Dan is deze functie wat voor jou! Software Consultant Wat zijn je taken? Als software consultant ben je dé schakel tussen de klant en de software. Je bent dagelijks bezig met de implementatie van onze ERP software PowerAll. Bij nieuwe klanten bestaat dit uit installatie, inrichting, training en nazorg. Bij bestaande klanten geef je advies over nieuwe mogelijkheden en zorg je voor dat dit succesvol is in gebruik worden genomen. Daarnaast geef je ondersteuning op afstand van op locatie bij

Bekijk vacature »

Junior Fullstack JAVA developer @ Regio Eindhoven

2021-10-17 iSense Junior Fullstack JAVA developer Heb je onlangs een hbo-, wo-opleiding of een minor richting de IT afgerond en wil je graag aan de slag als Fullstack JAVA Developer? Lees dan snel verder! Want in februari 2022 start de Experis Academy weer met een leerprogramma waarin IT-experts je opleiden tot developer met als specialisatie JAVA. Dit allemaal met een salaris en een vooruitzicht op een baan bij een topwerkgever. ISNA51135 Wat ga je doen tijdens het Fullstack JAVA ontwikkeltraject? Vanaf februari 2022 krijg jij via de Experis Academy een unieke kans om jouw IT-carrière een kickstart te geven en

Bekijk vacature »

.NET Developer / Azure @ Tilburg

2021-09-27 iSense .NET Developer Azure Ben jij een .NET Developer met 2 - 3 jaar werkervaring en lijkt het je leuk om te werken bij een organisatie die een grote maatschappelijke bijdrage levert binnen de Nederlandse zorgsector? Lijkt het je interessant om aan de slag te gaan in een Azure DevOps omgeving? Reageer dan nu! ISHU49852 Organisatie De organisatie waar je als .NET Developer komt te werken houdt zich bezig met het bouwen van oplossingen ter ondersteuning van de intensieve zorg in Nederland. Hierdoor kennen de applicaties tal van koppelingen met externe systemen van toonaangevende zorgpartijen en spelen ook maatschappelijke

Bekijk vacature »

Microsoft BI engineer

Ben jij die meewerkend BI-voorman die graag zelf wil ontwikkelen maar ook een visie heeft, anderen kan motiveren en werkzaamheden kan coördineren. Dan zijn wij op zoek naar jou! Je uitdaging De Nederlandse Transplantatie Stichting (NTS) heeft als missie: meer patiënten helpen met een transplantatie met respect voor de donor. Daarbij is transparantie van beschikbare informatie heel belangrijk. We delen informatie met de organisaties en wetenschappers die betrokken zijn bij donatie en transplantatie. Daarvoor heeft de NTS een BI team. We werken met medische data. Hiervoor moeten we rekening houden met privacy aspecten en wetgeving. Deze data gebruiken we voor

Bekijk vacature »

.Net Developer / Azure / Angular / SaaS @ Amsterda

2021-08-27 iSense .Net Developer Azure Angular SaaS Would you like to work in a young and innovative SaaS company with their office in the city center of Amsterdam? Do you thrive in an environment with a lot of freedom and responsibility? Then this might be your next step! ISKE48834 Nieuw Company profile This company is an international operating SaaS company that, with their software, tries to improve the heatlh and luck of employees worldwide. Every year at least 2 million people use their software in their own language. The employees of this company can be described as a young, enthusiastic,

Bekijk vacature »

Senior Lead Developer (Magento) (40u)

ChromeBurner: online marktleider in de motorbranche in Nieuwkuijk is op zoek naar een Senior Lead Magento Developer om nog meer gas te kunnen geven en de volgende stap te maken! Bij ChromeBurner gaan we hard! Momenteel zijn wij, onder andere doordat we wereldwijd opereren, de grootste motorkleding specialist van Nederland. Met gemiddeld 50% groei per jaar zijn we hard op weg om één van de meest toonaangevende bedrijven in onze branche te worden wereldwijd. Deze groei is niet onopgemerkt gebleven, getuigen onze meerdere FD Gazellen awards van de afgelopen jaren en posities in de eCommerce top 50 en Top 250

Bekijk vacature »

Applicatieontwikkelaar .NET en of Java

We leven in een wereld die 24/7 draait op technologie. Een mooi gegeven, maar ook een flinke uitdaging. Niet iedereen weet complexe IT-omgevingen up and running te houden. Bij ICT Group weten wij heel goed hoe we alles wél draaiende kunnen houden. Hoe? Samen met onze collega’s van Outsourced Services. Onze (en wellicht jouw toekomstige) collega’s nemen het beheer van software uit handen van onze klanten en zorgen ervoor dat we een mooie balans creëren tussen investering en rendement. Deze afdeling heeft als doel een toegevoegde waarde te zijn voor haar klanten door mee te denken en samen tot innovatieve

Bekijk vacature »

Java Software Developer

Java Software Developer - Smart Logistics Functiebeschrijving: Bouw jij de professionele applicaties die onze klanten zo hard nodig hebben? En wil je graag met de nieuwste technologieën werken binnen een DevOps scrumteam? Lees dan snel verder! Wat ga je doen? Als Java Software Developer werk je aan uitdagende projecten bij verschillende klanten en ben je altijd onderdeel van een software ontwikkelteam. Samen met je team, de product owner en de architect ben je verantwoordelijk voor het definiëren, ontwerpen, ontwikkelen, beveiligen en testen van nieuwe of bestaande applicaties binnen de logistieke sector. “Use digital to move smarter" De unit Smart Logistics

Bekijk vacature »

DevOps Engineer

Do you want to fast-track your DevOps career? An opportunity has arisen in Amsterdam for a DevOps Engineer to fast-track their career with full support, as well as own their DevOps function. Here’s why it may interest you: You will own the DevOps space with the freedom to impact their award-winning end-product You will work on new, cloud technologies and learn from highly skilled engineers around you Tech Stack: Python, AWS, Terraform, Ansible, Docker Remote working Salary up to €70.000 with flexibility for the right individual If you would like more information, please reach out for an informal conversation. A

Bekijk vacature »

JavaScript Developer

As a Front-End Developer at Coolblue you improve the user-friendliness of our webshop for millions of customers. How do I become a JavaScript Developer at Coolblue? As a Front-end Developer you work on the user-friendliness of our webshop for millions of customers. You enjoy working with the UX Designer to pick up stories. You get energy from coming up with creative solutions and are happy to present this within the team. You are also proud of your work and welcome all feedback. Would you also like to become a Front-End Developer at Coolblue? Read below if the job suits you.

Bekijk vacature »

Uitdagende kans voor .Net ontwikkelaars!

Bedrijfsomschrijving Deze informele organisatie heeft ontzettend veel contacten binnen grote en bekende organisaties. Dit zorgt ervoor dat jij als .Net ontwikkelaar op leuke en uitdagende projecten komt te werken, hierbij zal de focus vooral liggen op het midden van het land. Veel ontwikkelaars zijn via onze opdrachtgever aan het werk bij bijvoorbeeld grote financiële dienstverleners maar het is niet geheel ongebruikelijk om bij kleinere instanties aan het werk te gaan. Bij onze opdrachtgever ligt er veel focus op de persoonlijke ontwikkeling en groei van hun medewerkers. Je krijgt daarom veel ruimte om certificaten te behalen die belangrijk zijn voor jouw

Bekijk vacature »

IT Applicatie Specialist R&D

Dümmen Orange is wereldwijd de grootste veredelaar en producent van uitgangsmateriaal voor snijbloemen, bollen, tropische planten, potplanten, perkplanten en vaste planten. Voor onze IT afdeling in De Lier zoeken wij een IT Applicatie Specialist Research & Development. Functie inhoud Dümmen Orange groeit en bloeit! Dit resulteert in een snel veranderende en tevens uitdagende werkomgeving. Als IT Applicatie Specialist ben je verantwoordelijk voor het optimaal functioneren en doorontwikkelen van de applicaties ten behoeve van Research & Development (R&D) activiteiten. Dit omvat Breeding activiteiten (eBrida, AIP), Laboratorium (LIMS, iVention), en Research (in-house ontwikkelde software tooling en beheer). Heb je van nature een

Bekijk vacature »

.NET Ontwikkelaar / Medior @ Regio Duiven

2021-06-07 iSense .NET Ontwikkelaar Medior Ben jij een C# Developer die binnen een innovatieve, logistieke organisatie wilt werken? Vind je het interessant om de door jou ontwikkelde software en code te koppelen aan complexe systemen en daarnaast de implementatie te begeleiden? Lees snel verder! ISK49485 Nieuw Organisatie Je komt als Ontwikkelaar te werken bij een organisatie die is gespecialiseerd in industriële automatiseringsoplossingen. De organisatie heeft al ruim 45 jaar ervaring met optimalisatie van processen binnen de industriële sector. De organisatie kenmerkt zich als innoverend, meedenkend en informeel. Binnen het team heerst er een positieve teamspirit met een gezonde dosis ondernemerschap

Bekijk vacature »
Mark Markson

Mark Markson

05/11/2013 15:55:37
Quote Anchor link
Hoi,

Ik wil een eigen imageupload schrijven. Eentje die niet de pagina ververst, maar eentje met AJAX, met Javascript. Ik heb een beetje gezocht naar Formdata etc. maar ik kom er maar niet uit. Iemand een leuke tutorial of een heel simpel stukje script?
 
PHP hulp

PHP hulp

19/10/2021 14:59:42
 
Frank Nietbelangrijk

Frank Nietbelangrijk

05/11/2013 17:01:56
Quote Anchor link
Javascript draait in een geïsoleerde omgeving en kan geen bestanden uploaden. Het beste alternatief is -denk ik- naar een java oplossing te kijken.
 
Kris Peeters

Kris Peeters

05/11/2013 17:05:29
Quote Anchor link
Ondertussen kan dat wel, hoor (vrij recent).

Geen java, geen plugins; ... gewoon javascript in HTML5.

Even zoeken of ik een demo klaar heb
 
Pipo Clown

Pipo Clown

05/11/2013 17:10:00
Quote Anchor link
Volgens mij kan je met javascript, i.c.m. AJAX, een stukje PHP-code uit laten voeren.

Met deze PHP-code is het wel degelijk mogelijk om een image te uploaden.
 
Kris Peeters

Kris Peeters

05/11/2013 17:43:33
Quote Anchor link
Dit maakt deel uit van iets wat ik half-afgewerkt in mijn (virtuele) kast heb steken; Wanneer dit echt van pas komt, doe ik voort ...

Benodigdheden (allemaal in de zelfde map steken):
"index.php"
"upload.php"
"files" (directory, op 777 zetten tijdens het testen)

werking:
De client sleept foto's in een drop-area; javascript genereert een preview (op zich al vrij cool)
De client drukt op de knop.
De foto's worden geüploadet, maar aan de pagina merk je daar voorlopig niets van (wegens code niet klaar).
Je vindt ze wel in de map files\

Kijk zeker ook naar de links die ik in het commentaar zet.

upload.php (merk op dat extra controle hier gewenst is)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?php
move_uploaded_file ( $_FILES['file']['tmp_name'] , 'files/' . $_FILES['file']['name'] );
?>


index.php
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<style>
#drop_files{
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
#preview{
  width: 300px;
  height: 600px;
  border: 1px solid #000;
  overflow: auto;
  background-color: #101010;
}
#preview li{
  height: 110px;
  width: 140px;
  /*float: left;*/
  list-style: none;
  border: 1px solid #999999;
  margin: 5px;
  background-color: #030303;
  color: #ff6666;
}
#preview img{
  max-height: 110px;
  max-width: 110px;
}
#preview .close{
  float: right;
}
</style>
<div id="drop_files"> Drag and drop image files here </div>
<input type="button" value="upload" id="upload_button">
<ul id="preview"></ul>
<script>
/**
* Upload file
* @see http://stackoverflow.com/questions/4856917/jquery-upload-progress-and-ajax-file-upload
*/
function upload(file, index) {
    var url = 'upload.php';
    //var file = this.files[0];
    
    var xhr = new XMLHttpRequest();
    xhr.file = file; // not necessary if you create scopes like this
    xhr.addEventListener('progress', function(e) {
        var done = e.position || e.loaded, total = e.totalSize || e.total;
        console.log('xhr progress: ' + (Math.floor(done/total*1000)/10) + '%');
    }, false);
    if ( xhr.upload ) {
        xhr.upload.onprogress = function(e) {
            var done = e.position || e.loaded, total = e.totalSize || e.total;
            console.log('xhr.upload progress: ' + done + ' / ' + total + ' = ' + (Math.floor(done/total*1000)/10) + '%');
        };
    }
    xhr.onreadystatechange = function(e) {
        if ( 4 == this.readyState ) {
            console.log(['xhr upload complete', e]);
        }
    };
    xhr.open('post', url, true);
    
    // Form data.  To give image a name.
    var fd = new FormData;
    fd.append('file', file);
    //fd.append('photo2', file2);
    //fd.append('index', index);
    xhr.send(fd);
}

/**
* preview image
* @see http://stackoverflow.com/questions/16861744/preview-an-image-before-it-is-uploaded-hide-broken-img
*/
function preview(files) {
  $('#drop_files').html(files.toString());
    if (files && files[0]) {
        for(var i=0; i<files.length; i++) {
          var reader = new FileReader();
          reader.onload = function (e) {
            $('#preview').append('<li><span class="close">X</span><img src="' + e.target.result + '"></li>');
          }
          reader.readAsDataURL(files[i]);
        }
    }
    //upload(files[0], 0);
}
/**
*  Drag drop file
* @see http://stackoverflow.com/questions/9544977/using-jquery-on-for-drop-events-when-uploading-files-from-the-desktop
*/
function drag_drop_files(e) {
  //
  $('#drop_files').on(
    'dragover',
    function(e) {
      e.preventDefault();
      e.stopPropagation();
    }
  )
  $('#drop_files').on(
    'dragenter',
    function(e) {
      e.preventDefault();
      e.stopPropagation();
    }
  )
  $('#drop_files').on(
    'drop',
    function(e) {
      if(e.originalEvent.dataTransfer) {
        if(e.originalEvent.dataTransfer.files.length) {
          e.preventDefault();
          e.stopPropagation();
          // copy file data to the uploadWidget
          
          // uploadWidget.files.push(e.originalEvent.dataTransfer.files.FileList);
          uploadWidget.files.push(e.originalEvent.dataTransfer.files);
          
          /*UPLOAD or PROCESS FILES HERE*/
          preview(e.originalEvent.dataTransfer.files);
          // refresh sortable
          $("#preview").sortable('refresh').disableSelection();
        }
      }
    }
  );
}

var uploadWidget = new Object();
uploadWidget.files = new Array();

$(document).ready(function() {
  drag_drop_files(null);
  
  $("#preview").sortable({
    update: function() {
      // voorlopig doen we hier niets
    }
  });
  
  $('#upload_button').click(function(e) {
    for(var i=0; i<uploadWidget.files[0].length; i++) {
      upload(uploadWidget.files[0][i], i);
    }
  });
  
});
</script>
Gewijzigd op 05/11/2013 17:57:26 door Kris Peeters
 



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.