Jump to content

INPUT type=file


Bogey
 Share

Recommended Posts

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! ;)

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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...

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...