[php]File upload met ajax (zonder POST)

[bibawa]

Ik ben bezig met een AJAX website en de bedoeling is dat de gebruiker van de website een afbeelding moet kunnen uploaden.

> De gebruiker selecteert de afbeelding in een <input type='file' ..> box
> De gebruiker klikt op de knop (van het type <input type='button' ..>)
> Een javascript controleer() funtie wordt opgeroepen om de ingevoerde content te controleren
> Is de invoer OK dan wordt een AJAX pagina opgeroepen om alles te verwerken naar de db toe..

Nu in deze ajax oproep zou ook de foto geupload moeten worden, maar dat lukt me niet omdat ik geen POST request heb..

ik geef wel al mijn variabelen door naar de ajax pagina dmv POSt door het opbouwen van een poststring:

PHP:

            var poststr = "afbeelding=" + encodeURI( document.form.txtafb.value);

nu kan ik op de ajax pagina via $_POST['afbeelding'] de URL opvragen van het plaatje op je locale pc maar dan ben ik er nog niet, in het upload script gebruik ik van $_FILES['afbeelding'] de ['tmp_name'] ,['name'] en ['size'] elementen uit de array van $_FILES..

En dat lukt net niet $_FILES benaderen vanuit de ajax pagina.

Weet iemand hier een oplossing voor?

[BasieP]

wat let je om een post request te gebruiken? die zijn hier nl. voor gemaakt

edit:
met 'de ajax pagina' bedoel je een server side script? (php)

ik zie dat je: '$_POST['afbeelding']' gebruikt, als je $_POST array gevult is dan gebruik je dus wel de http_post method...
in dat geval zou $_files het ook moeten doen indien je ze bij het posten goed meegeeft. Dit laatste gaat in ieder geval niet zoals jij het nu doet..

google verteld mij (binnen 10 seconden)
dat je veel meer gegevens aan je post request moet hangen dan alleen een locatie van een bestand:

zie ook:
http://sean.treadway.info/demo/upload/
http://www.captain.at/ajax-file-upload.php

[ Voor 104% gewijzigd door BasieP op 08-07-2007 10:47 ]

[kokx]

Je kunt helaas geen file uploaden met AJAX. De enige manier om dit Asynchroon te doen is een iframe te gebruiken.

Remember: Google is your best friend

[ Voor 23% gewijzigd door kokx op 08-07-2007 10:40 ]

[BasieP]

kokx schreef op zondag 08 juli 2007 @ 10:39:
Je kunt helaas geen file uploaden met AJAX. De enige manier om dit Asynchroon te doen is een iframe te gebruiken.

Remember: Google is your best friend

Dit kan prima, alleen je zult zelf je data moeten opbouwen.. (zie me vorige post)

trouwens heb ik dit allemaal kunnen uitzoeken binnen ene paar minuten, zonder enige voorkennis. Ik wist ook niet hoe het moest.
Waarom kan de TS dit niet?


nogmaals @ TS:
waarom lees jij $_POST uit, als je geen data post naar de server? je script of je verhaal hier op got klopt niet.

[ Voor 9% gewijzigd door BasieP op 08-07-2007 10:53 ]

[SchizoDuckie]

http://www.schizofreend.nl/pork.iframe/

[djc]

Dit dingetje is misschien ook wel interessant. Gebruikt een klein Flash-bestandje om de upload te doen.

[JKVA]

Zover ik weet is een IFRAME de oplossing voor je probleem. Voor IFRAMES geldt niet de beperking die het XmlHttpRequest object heeft m.b.t. file upload.

Referentie: The Dojo Toolkit gebruikt het ook.

[Slagroom]

Dit werkt sowieso niet:
document.form.txtafb.value
Ja kan de waarde van een file field niet opvragen

[Janoz]

BasieP schreef op zondag 08 juli 2007 @ 10:46:
[...]

Dit kan prima, alleen je zult zelf je data moeten opbouwen.. (zie me vorige post)

Dan ben ik erg benieuwd hoe jij van plan bent middels javascript een bestand van de harde schijf van je bezoeker in te lezen en te verwerken tot een post request.

daarnaast is het m'n post of mijn post, niet me post

[BasieP]

Janoz schreef op zondag 08 juli 2007 @ 17:14:
[...]

Dan ben ik erg benieuwd hoe jij van plan bent middels javascript een bestand van de harde schijf van je bezoeker in te lezen en te verwerken tot een post request.

daarnaast is het m'n post of mijn post, niet me post

in me post die ik hierboveuh hebt gedaan wortd ut uitgelegdt. Ik heb ut maar opgesocht, dus weet ur niet allus van. Maar ik hat ut idee dat ut wel kon (na un snelle blik gewerpt te hebbeuh)

[kokx]

Als je wat beter had gekeken, is dat nogal browser-incompatibel. Het kan alleen met Firefox, als je ook nog eens een setting veranderd (daar gaat die 2e link over).

En de eerste link gaat over het bijhouden van de upload status via AJAX.

[BasieP]

kokx schreef op zondag 08 juli 2007 @ 17:23:
Als je wat beter had gekeken, is dat nogal browser-incompatibel. Het kan alleen met Firefox, als je ook nog eens een setting veranderd (daar gaat die 2e link over).

En de eerste link gaat over het bijhouden van de upload status via AJAX.

ach ja, als ik eerst een half uur materie moet gaan lezen voordat ik links post met de bedoeling de topic starter te helpen..
dacht het ff niet..

[storeman]

Janoz schreef op zondag 08 juli 2007 @ 17:14:
[...]

Dan ben ik erg benieuwd hoe jij van plan bent middels javascript een bestand van de harde schijf van je bezoeker in te lezen en te verwerken tot een post request.

daarnaast is het m'n post of mijn post, niet me post

BasieP schreef op zondag 08 juli 2007 @ 17:16:
in me post die ik hierboveuh hebt gedaan wortd ut uitgelegdt. Ik heb ut maar opgesocht, dus weet ur niet allus van. Maar ik hat ut idee dat ut wel kon (na un snelle blik gewerpt te hebbeuh)

Volgens mij is de ts-er nogal hardleers.

Het kan inderdaad, via een Iframe, zoals al eerder gemeld. Laatst heb ik dit zelf ook geimplementeerd, het is echt de beste manier om het via een soort van ajax voor elkaar te krijgen.

JavaScript:

/**
*
*  AJAX IFRAME METHOD (AIM)
*  http://www.webtoolkit.info/
*
**/

AIM = {

    frame : function(c) {

        var n = 'f' + Math.floor(Math.random() * 99999);
        var d = document.createElement('DIV');
        d.innerHTML = '<iframe style="display:none" src="about:blank" id="'+n+'" name="'+n+'" onload="AIM.loaded(\''+n+'\')"></iframe>';
        document.body.appendChild(d);

        var i = document.getElementById(n);
        if (c && typeof(c.onComplete) == 'function') {
            i.onComplete = c.onComplete;
        }

        return n;
    },

    form : function(f, name) {
        f.setAttribute('target', name);
    },

    submit : function(f, c) {
        AIM.form(f, AIM.frame(c));
        if (c && typeof(c.onStart) == 'function') {
            return c.onStart();
        } else {
            return true;
        }
    },

    loaded : function(id) {
        var i = document.getElementById(id);
        if (i.contentDocument) {
            var d = i.contentDocument;
        } else if (i.contentWindow) {
            var d = i.contentWindow.document;
        } else {
            var d = window.frames[id].document;
        }
        if (d.location.href == "about:blank") {
            return;
        }

        if (typeof(i.onComplete) == 'function') {
            i.onComplete(d.body.innerHTML);
        }
    }
}

function startCallback() {
    // make something useful before submit (onStart)
    
    $('fmuploadsubmit').value       = 'Processing...';
    $('fmuploadsubmit').disabled    = 'disabled';
    
    ShowSexyBOX('<br/>Wait while uploading the file...<br/><br />','300');
    
    return true;
}


function setAction(obj)
{
    var dir = $('currentdir').innerHTML;
    obj.action = "?fmaction=upload&currentdir=" + dir;
}

function handleUpload(response)
{
    if(response == 'file_exists_error')
    {
        ShowSexyBOX('<br/>File already exists in folder. The file was named randomly.<br/>Click to continue...<br /><br />', 300);
        HideOnClick();
    }
    else if(response == 'file_uploaded_success')
    {
        ShowSexyBOX('<br/>File uploaded!<br/><br />', 300);
        setTimeout('HideSexyBOX()',800);
    }
    else
    {
        ShowSexyBOX('<br/>Error while uploading.<br />Click to continue...<br /><br/>', 300);
        HideOnClick();
    }
    
    refreshDirectoryView();
    
    $('fmname').value = 'new_file_name';
    $('fmuploadsubmit').value       = 'Send to server';
    $('fmuploadsubmit').disabled    = null;
}

String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g,"");
}
String.prototype.ltrim = function() {
    return this.replace(/^\s+/,"");
}
String.prototype.rtrim = function() {
    return this.replace(/\s+$/,"");
}

[funkwurm]

Slagroom schreef op zondag 08 juli 2007 @ 15:33:
Dit werkt sowieso niet:
document.form.txtafb.value
Ja kan de waarde van een file field niet opvragen

Dat kan wel degelijk, maar je kunt er niets in wijzigen/wegschrijven (anders dan resetten). Immers, anders zou het volgende ook kunnen:

HTML:

<form action="filestealer.php" style="display:none" name="myform">
  <input type="file" id="geheim">
  <script type="text/javascript">
    window.onload=function () {
      document.getElementById('geheim').value="c:\pad\naar\bestand.ext";
      document.myform.submit();
    }
  </script>
</form>

Een form heeft een target waarmee je hem naar een iframe kan sturen, het is ECHT de enige manier. Daarnaast zijn er wel kekke flash en java-applet oplossingen voor bijvoorbeeld ook meerdere bestanden tegelijk.

[JKVA]

funkwurm schreef op zondag 08 juli 2007 @ 18:52:
[...]
Een form heeft een target waarmee je hem naar een iframe kan sturen, het is ECHT de enige manier. Daarnaast zijn er wel kekke flash en java-applet oplossingen voor bijvoorbeeld ook meerdere bestanden tegelijk.

Idd, daarom postte ik ook expres al de naam van The Dojo Toolkit. Niet echt een framework dat door beginners is gemaakt ofzo.

Die multi file uploaders zijn idd cool ja. Heb vroeger weleens met XUpload gewerkt (voor ASP). Ze hebben ook een cross platform JUpload variant.
http://www.aspupload.com/jupload.html