Image naar server versturen zonder page reload

[Sgrovert]

Momenteel ben ik al een paar dagen op zoek naar een manier om een image naar een server te sturen, zonder dat de gebruiker de huidige pagina verlaat.
Dit is de code die ik tot nog toe heb :

HTML:

<form id='form1' enctype='multipart/form-data'>
File: <input type='file' id='imageUpload' name='imageUpload' size='20' /> <br />
<input type='button' value='Save' onClick="ajaxFunction();">
<textarea name="respons"></textarea>
</form>

De bijbehorende functie :

JavaScript:

function ajaxFunction(){
    var ajaxRequest;  // The variable that makes Ajax possible!
    
    try{
        // Opera 8.0+, Firefox, Safari
        ajaxRequest = new XMLHttpRequest();
    } catch (e){
        // Internet Explorer Browsers
        try{
            ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try{
                ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e){
                // Something went wrong
                alert("Your browser broke!");
                return false;
            }
        }
    }
    // Create a function that will receive data sent from the server
    ajaxRequest.onreadystatechange = function(){
        if(ajaxRequest.readyState == 4){
            document.myForm.respons.value = ajaxRequest.responseText;
        }
    }
    //Gather the data which will be send
    var data = ? 

    ajaxRequest.open("POST", "server.php", true);
    ajaxRequest.send(data); 
}

En het bestand in het bestand "server.php" staat voorloptig

PHP:

<?php
print_r($_REQUEST);
?>

Bovenstaande code is de code waarvan ik vrij zeker weet dat die goed is. Het is met gelukt om data over te sturen, en ook weer terug te krijgen. Wat me nog niet gelukt is om een afbeelding te versturen.
Hiervoor heb ik 2 dingen die ik niet weet,
1) Hoe ziet de data eruit die verstuurd moet worden?
2) Hoe catch ik deze in het php bestand op de server. Het lijkt erop dat versturen met XMLHttpRequest() andere data stuurt dan een form dat gesubmit word.

Verder heb ik gezien dat het plaatsen van Headers iets kan oplossen, maar ben ik er nog niet achter of dit nodig is en hoe ze er dan precies uit moeten zien. Dit ook omdat dit weer gerelateerd is aan de manier hoe "data" eruit ziet.

[Styxxy]

En wat geeft

PHP:

print_r($_FILES);

[R4gnax]

Je kunt onder Internet Explorer geen binaire data versturen met het XMLHttpRequest. Zelfs al zou je dat wel kunnen; je kunt ook geen filehandle krijgen op het file dat een gebruiker geselecteerd heeft.

Een truc die je kunt proberen is om de form met de file input een target attribuut te geven wat naar een verborgen iframe verwijst. De postback zou dan via dat iframe moeten verlopen en de pagina zelf zou niet opnieuw moeten inladen.

Als je niet in IE geïnteresseerd bent, dan is er de HTML5 File API en extensie op XMLHttpRequest die binary transports toestaat. (Ik geloof dat er ergens op het Mozilla Development Center voorbeelden beschikbaar zijn.)

[Bosmonster]

Met XHR ga je dit volgens mij idd niet bereiken xbrowser. Een verborgen iframe zou wel een oplossing bieden.

[Jaap-Jan]

Roundcube kan attachments uploaden zonder page refresh, misschien kun je kijken hoe die dat hebben opgelost.

[Cartman!]

Je kan ook gewoon dat stukje in een iframe zetten en daarin een normale post doen vanuit een form. De locatie van de foto kun je dan gewoon weer doorgeven via JS.

[Martine]

Misschien kun je eens kijken naar de SWFUpload of misschien kun je daar wat uit vissen, demo.swfupload.org

[ Voor 16% gewijzigd door Martine op 16-02-2011 12:39 ]

[kKaltUu]

Als we linkjes gaan aanbieden mag JUpload niet ontbreken http://jupload.sourceforge.net

[Martine]

kKaltUu schreef op woensdag 16 februari 2011 @ 12:42:
Als we linkjes gaan aanbieden mag JUpload niet ontbreken http://jupload.sourceforge.net

Heb het even snel bekeken, maar het grote nadeel daarvan is als Java eerst 'opgestart' moet worden, dan werkt de swfupload in mijn ogen toch beter omdat vele procenten van de mensen al flash hebben.

[K-Jay]

Is het niet handiger om jQuery te gebruiken? Zelf heb ik in een aantal projecten gebruik gemaakt van Uploadify en nu gebruik ik een script gebaseerd op deze plugin. Ook deze blogpost kan inzichten bieden.

[Sgrovert]

Allemaal bedankt voor de reacties.
Naar aanleiding van die topic heb ik er voor gekozen om toch met een iframe te gaan werken. Onderstaand is de code die ik momenteel werkend heb. Even kort een kleine beschrijving wat er gebeurd.

Het input veld voor de afbeelding staat in een iframe. Wanneer op safe geklikt word, zal het formulier in het iframe naar de server gestuurd worden. Deze creëerd in een temp folder een bestand om de status van de upload bij te houden. Het bestand krijgt als filename de naam van de upload met _state eraan gekoppeld. Daarna word indien er een afbeelding geupload is ook de afbeelding in de temp folder gezet en daarna een thumbnail hiervan aangemaakt. Het _state bestand word gedurende het proces geupdate, zodat de client kan opvragen hoe ver het proces is.

In de client word na het versturen van de server de "trackStatus" functie aangeroepen. Deze zal een aantal keer de _state file uitlezen om het upload proces te monitoren. Zodra deze aangeeft dat de thumbnail klaar is zal hij deze laten zien.

Tot zo werkt het script. Later krijgt de gebruiker nog een aantal instelmogelijkheden voor de afbeelding en zal deze na een definitieve submit naar zijn eindplek verplaatst worden. De temp bestanden worden dan verwijderd. Aangezien dat stuk voor de vraag niet relevant is, heeft het weinig zin om die code ook te plaatsen.

HTML:

<body>
<div id="imuploader">
    <div id="thumb">
        <img src="" id="imagethumb" />
    </div><div id="uploadinput">
        <p><iframe id="imSourceLoc" name="imSourceLoc" onload="putContent('imSourceLoc','frameContent')"></iframe></p>
        <p><button type="button" onclick="startUploadProcess()">Save</button> <span id="status"></span></p>
    </div>
</form>
</div>

<div id="frameContent" >
<form id='sendImage' name="sendImage" method="post" action="receiveImage.php" enctype="multipart/form-data">
<input type='file' id='imageUpload' name='imageUpload' size='20' />
</form>
</div>
</body>
</html>

JavaScript:

<script type="text/javascript">
//Object aanmaken om gegevens van te uploaden images te verzameken

upIm=new Object();
upIm.status=0 // Image unknown
function $(id) // Zorgt dat $('element') het element oplevert
{
  return document.getElementById(id);
}
function leesDataUrl(url) {
    if (window.XMLHttpRequest) {
        codeObject=new XMLHttpRequest();
    } else {// for older IE 5/6
        codeObject=new ActiveXObject("Microsoft.XMLHTTP");
    }
    codeObject.open("GET",url,false);
    codeObject.setRequestHeader("User-Agent",navigator.userAgent);
    codeObject.send(null)
    if (codeObject.status==200) return (codeObject.responseText);
    else return("file not found");
}

function trackStatus() { //Keeps track of the upload proces.
    if(upIm.status==1) // Server geeft nog geen gevens terug
        waitForFile();
    if(upIm.status==2) //Server heeft status file aangemaakt
        checkProcess();
    if(upIm.status==3) {//Thumb is aangemaakt
        document.getElementById('imagethumb').src='images/temp/_'+upIm.name;
    }
    if(upIm.status=='error') {
        alert(upIm.error)
    }
    return
}
function checkProcess() {
    var state=leesDataUrl(upIm.checkUploadState);
    $('status').innerHTML=state; //Visuele update van de status geven
    if (state=="complete")
        upIm.status=3;
    if (state=="pending")
        setTimeout('trackStatus()',250);
    if (state.substr(1,5)=="error") {
        status='error';
        upIm.error=state.substr(6);
    }
    return
}

function waitForFile() {
    upIm.counter=upIm.counter+1;
    if (leesDataUrl(upIm.checkUploadState)=="file not found") {
        setTimeout('trackStatus()',100*upIm.counter);
    } else {
        upIm.status=2;
        trackStatus()
    }
    return
}

function putContent(frameId,contentDivId){ //This functions gets the content out of a div and puts it in an iFrame
    var content=document.getElementById(contentDivId).innerHTML;
    var testFrame = document.getElementById(frameId);
    var doc = testFrame.contentDocument;
    if (doc == undefined || doc == null)
        doc = testFrame.contentWindow.document;
  doc.open();
  doc.write(content);
  doc.close();       
}
function startUploadProcess() { //Image een beetje checken en daarna naar server sturen
    var imForm=window.frames['imSourceLoc'].document.getElementById('sendImage'); // File input element
    imForm.submit();
    upIm.status=1 //Upload send
    
    var filename=imForm.imageUpload.value; //Filename van het bestand dat aangeboden word.
    if(filename=='') //Bij geen filename doe niks
        return;

    $('status').innerHTML='Uploading'; //Visuele melding naar gebruiker
    upIm.name=filename.toLowerCase();
    upIm.checkUploadState='SITE/images/temp/'+upIm.name+'_state'; //URL waarop de upload status gechecked kan worden
    upIm.counter=0; // Een counter om het aantal lees pogingen naar de server bij te houden. !! Belangrijk om server niet te overbelasten
    
    extension=upIm.name.split('.');
    extension=extension[extension.length-1];
    //Checken of de file een afbeelding is.
    if(extension in {'jpg':'', 'jpeg':'','png':'','gif':''}) {
        trackStatus(); //Functie om het opload process bij te houden.
        return;
    } else {
        alert('You tried to upload an ".'+extension+'" file. Only ".jpg, .jpeg, .png and .gif" files are supported')
        return;
    }
}
</script>

PHP:

<?php
$receivedIm=$_FILES['imageUpload'];
$path="images/temp/";

function procesStatus($state) {
    global $imName;
    global $path;
    $fh = fopen($path.$imName.'_state', 'w') or die("can't open file");
    fwrite($fh, $state);
    fclose($fh);
}

function checkImage($image) { // Deze functie checked of er een geldige afbeelding aangeboden worden
    $error=0;
    // Valid MIME-types 
    $mimetypes = array('image/gif', 'image/png', 'image/x-png', 'image/jpeg', 'image/jpg', 'image/pjpeg'); 
    //Valid extentions
    $extentions = array('.jpg' , '.jpeg' , '.png' , '.gif');
    
    //kijken of het bestand wel een gif, png of jpg is 
  if(!in_array($image['type'], $mimetypes) ) { 
        $error=1; // Dit bestandstype wordt niet ondersteund.
    }
    //Checken of de bestandsnaam op een geldige extentie eindigd
    $extentie = strtolower(strrchr($image['name'], "."));
    if(!in_array($extentie, $extentions) ) { 
        $error=2; // Filename niet correct
    }
    return $error;
}


if(isset($receivedIm)) {
    $imName=strtolower($receivedIm['name']); // Filename van ontvangen bestand naar kleine letters omzetten
    procesStatus('pending');
    $error=checkImage($receivedIm);
    if($error!=0) { procesStatus('error '.$error);return;}
    
    //Bestand op de gewenste plaats wegschrijven
    if($error==0) {
        move_uploaded_file($receivedIm['tmp_name'], $path.$imName);
        chmod($path.$imName, 0775);
        //Thumb aanmaken :
        
        //Zoek afmetingen orgineel op
        list($width, $height, $image_type) = getimagesize($path.$imName);
        
        //--- maak resize image aan in het geheugen
        $thumb=imagecreatetruecolor(100, 100);
        
        //--- Lees orgineel in
        switch ($image_type) {
            case 1: $source = imagecreatefromgif($path.$imName); break;
            case 2: $source = imagecreatefromjpeg($path.$imName);  break;
            case 3: $source = imagecreatefrompng($path.$imName); break;
            default:  trigger_error('Unsupported filetype!', E_USER_WARNING);  break;
        }
        if(($image_type == 1) OR ($image_type==3)) { //Extra opties voor PNG en GIF thumbs netjes aan te maken
            imagealphablending($resize_k, false);
            imagesavealpha($resize_k,true);
        $transparent = imagecolorallocatealpha($resize_k, 255, 255, 255, 127);
        imagefilledrectangle($resize_k, 0, 0, $br_klein, $h_klein, $transparent);
        }
        imagecopyresampled($thumb, $source, 0, 0, 0, 0, 100, 100, $width, $height);
        
        // Thumb opslaan
    switch ($image_type) {
            case 1: imagegif($thumb, $path.'_'.$imName); break;
            case 2: imagejpeg($thumb, $path.'_'.$imName); break;
            case 3: imagepng($thumb, $path.'_'.$imName); break;
            default:  trigger_error('Failed resize image!', E_USER_WARNING);  break;
        }   
        procesStatus('complete');
    }
}
?>

Cascading Stylesheet:

#imuploader {
  margin: 0 auto;
  padding: 10px;
  border: 1px solid blue;  
  position: absolute; 
  background-color: white;
}

#thumb {
  float: left;
  width: 100px;
  height: 100px;
  border: 1px dotted grey;
}

#uploadinput {
  float:left;
  margin-left:20px;
}
#frameContent {
  display: none;
}
#imSourceLoc {
  height: 30px;
  border: 0px;
}

Ik heb voor de geïnteresseerde ook gelijk maar een klein stukje css toegevoegd Als je wilt testen klopt het visuele gedeelte dan ook.

[Sgrovert]

Vandaag voor het eerst gaan testen in IE en kom meteen een probleem tegen. De iFrame van content voorzien werkt niet en geeft een "Stack overflow" error. De relevantie functie is :

JavaScript:

function putContent(frameId,contentDivId){ //This functions gets the content out of a div and puts it in an iFrame
    var content=document.getElementById(contentDivId).innerHTML;
    var testFrame = document.getElementById(frameId);
    var doc = testFrame.contentDocument;
    if (doc == undefined || doc == null)
        doc = testFrame.contentWindow.document;
  doc.open();
  doc.write(content);
  doc.close();       
} 

HTML:

<iframe id="imSourceLoc" name="imSourceLoc" onload="putContent('imSourceLoc','frameContent')"></iframe>

<div id="frameContent" >
<form id='sendImage' name="sendImage" method="post" action="receiveImage.php" enctype="multipart/form-data">
<input type='file' id='imageUpload' name='imageUpload' size='20' />
</form>
</div>

Het lijkt erop dat er een loop ontstaat doordat IE het onload commando elke keer opnieuw aanroept. Iemand enig idee of dit het daadwerkelijke probleem is? Of zit er ergens een fout in mijn code.

Verder ben ik opzoek naar een manier om de Hoogte van het Iframe aan te passen. Simpel een height="80" erbij zetten werkt alleen als het iframe geen id of naam krijgt. (hoogte is in pixels).

[BarôZZa]

Waarom ga je de iframe van content voorzien en roep je niet gewoon een bestandje aan met de html erin

[Flowmo]

Dat is ook niet helemaal de manier waarop je het hoort te doen inderdaad. De bedoeling is dus dat je een apart html bestandje opmaakt met de content die je in dat iframe wilt serveren. Dat zou in dit geval dus een formulier zijn, waarmee je de afbeelding naar de server stuurt.

[Gadgets]

Mijn vraag is: waarom het wiel opnieuw uitvinden, er zijn prima jQuery / Flash alternatieven beschikbaar, gebruik die want ook naar de toekomst toe is dat veel beheersbaarder....

Just my 2 cents

[keesdewit]

Wellicht kun je de afbeelding via een Base64 encoding met de post data via je ajax call mee sturen?

[iH8]

dojo.io.iframe biedt deze mogelijkheid ook.

[BarôZZa]

Gadgets schreef op donderdag 24 februari 2011 @ 17:23:
Mijn vraag is: waarom het wiel opnieuw uitvinden, er zijn prima jQuery / Flash alternatieven beschikbaar, gebruik die want ook naar de toekomst toe is dat veel beheersbaarder....

Just my 2 cents

Een iframe met een callback is niks wereldschokkends en heel simpel te realiseren. Swfupload is een prima alternatief als je voortgang wilt hebben of meerdere bestanden tegelijk wil uploaden. Al die Javascript frameworks ben ik geen fan van, dus laat ik geheel links liggen.