INPUT type=file

[Bogey]

Hi all, I want user add photo's to my website! 3 things I wanna know! 1.) Now I have two buttons:

<FORM enctype='multipart/form-data' action='test_addfile.php?' method='post'><INPUT type="file" name="uploaded" id="uploaded"/><INPUT name="submit" type="submit" id="submit" name="Voeg nieuwe foto toe"/><FORM>

But I want it in just ONE button, something like:

<FORM><INPUT type="file" name="uploaded" id="uploaded" enctype='multipart/form-data' onclick="test_addfile.php" onchange="test_addfile.php"/><FORM>

Can this work somehow, or do I really need the 2 buttons? 2.) Now "test_addfile.php" is run as a new page, but I don't want the echo's from this file like a new page, but I want those echo's inside a certain DIV on the current page. Is that possible? How? Also with the "xmlhttp.onreadystatechange" thing? 3.) Is it possible somehow to have a <FORM enctype='multipart/form-data' action='test_addfile1.php'> inside another <FORM enctype='multipart/form-data' action='test_addfile2.php'>??? I tried it, but the inner FORM uses also the outer'test_addfile1.php' instead of 'test_addfile2.php'... Thnx all!

[justsomeguy]

The easiest way would be to put an onchange event on the field to submit the form. If you wanted to use an ajax upload it would be best to look for a library that will help you with that, several of the Javascript libraries have ajax upload components. Normally they submit the form inside of a hidden iframe or something similar and read the response to make it available in Javascript like a normal ajax response. Also, you can't embed any form in another one.

[Bogey]

Now I have written a piece of code, that allows the user to select pictures to upload (10 times a type=file input) and then click ones on OK to crop each of those pictures to smaller kb's (for picture) and tiny kb's (for thumbnail) at once... This I wrote in php... Do you mean I have to rewrite this part also in JS/AJAX to manage what I want instead of re-use my already written php-code? :S

[justsomeguy]

If you want to change how it works then you'll need to change part of your code to support the new way.

[Bogey]

I am already busy on thisone again I come back to it later... I have some ideas, going to try it out

[Bogey]

Oke I am back :S This are 2 ways I tried, but did not work

<DIV class='fillDBwrapper' id='divFotos'><INPUT type='file' name='uploaded' id='uploaded' onChange="load('addFoto.php', 'divFotos');"/><INPUT type='file' name='uploaded' id='uploaded' onChange="addFoto('divFotos')"/></DIV>

addFoto.php:

if ($_FILES['uploaded']['name']){echo "FILE SELECTED";}else{echo "NO FILE SELECTED";}die;

The first one ("load") is an AJAX function? How can I asign that function to my page?The second one runs, and also echo's to the right div, but echo's NO FILE SELECTED! Has to be with the problem, that JS is userside and PHP is serverside, but cant get it managed... Javascript:

function addFoto(targetDiv){fillContent('modules/secure/addFoto.php', targetDiv);} var xmlhttp;function run_xmlhttp() {if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();}else {// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");}}function fillContent(content, targetDiv){run_xmlhttp();xmlhttp.onreadystatechange=function() {if (xmlhttp.readyState==4 && xmlhttp.status==200) {document.getElementById(targetDiv).innerHTML=xmlhttp.responseText;}}xmlhttp.open('GET', content, true);xmlhttp.send();}

I rather dont want to use a FORM for above, cause this is already in a FORM... and form inside form wont work...Is it possible to send the 'addPhoto.php' to the same div as where the input file button is? This div show the already added pictures, but when clicking the input file button, then I want user to pick a photo from pc and after picked picture, php saves picture to server, and the div has to be reloaded, showing also the just newly added picture... I don't want a submit button, but I want code running right after user picked a picture from pc... (and yes code is checking for extension, to make sure picture has picked.... if not, user gets an error, so has to pick again... I hope I am clear about this, with my not 100% perfect English...

[justsomeguy]

You can't use a normal ajax request to upload a file to the server, like I mentioned above if you want an ajax-style upload you should look into things like jQuery or Sencha or Mootools for ajax upload features. Those libraries will help simplify the otherwise-complex task of uploading a file without reloading the page.

[Bogey]

Hmz... I have to dive into that then Your talking about not reloading the page, that sounds good.... but what I want is only reload the same div as where the request is coming from. Is that possible with JQuery orso? Or am I just wanting something that is totally not possible?

[justsomeguy]

You can respond however you want when the request comes back, if you want to update an element on the page you can do that in the response handler.