Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    54
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Uploading file without refreshing the page.

    Just wondered if anyone could help with this one please :

    Let's say i have a form as follows :

    Code:
    <form name="mymainform" method="post" action="step2code.php"> 
    
      Enter Description : <input type="text" value="" name="description" />
    
      Enter File URL (or press upload): <input type="text" value="" name="fileurl" />
    
      <input type="button" name="uploadbutton" onclick="DO_CODE_HERE" />
    
      <input type="submit" name="func" value="Next Step" /> 
    
    </form>
    Basically, just a form that allows you to input a description and a file (image) URL - When you click the "Next Step" button it will pass the description text (description) and the URL (fileurl) to the next program it calls (step2code.php) - This will work just fine if the user enters a description and MANUALLY enters a URL - It will go on to run step2code.php and process the data.

    However, what I would LIKE it to do is, if someone presses the button called "uploadbutton", it allows you to choose a file from your computer and then uploads it to a predetermined directory (which will already be set in a variable) - However, After the file has uploaded I don't want the form to refresh (there is lots of other data not shown here) - I just want it to (if successfull) return the URL of the uploaded file and place it in the field "fileurl".

    I could use <input type="file"> to get the local filename and then process it in step2code.php but I would like, if possible, to validate it and ensure it uploads whilst still on this page rather than doing it later and then having to return the user to the page (and fill in all the other fields again) if there is an error.

    Any ideas on the easiest way to do it please?

    EDIT: Just to clarify exactly what the code needs to do :

    1. I have a form which has lots of input fields on (I jave just listed the "description" and "URL" fields above for the sake of brevity), all of which will be passed to the step2code.php program upon submit. step2code.php will process the data. One of the fields needs to give the option to upload an image file and store the URL for the image in the field value so that step2code.php can just process the image URL (and it will already be uploaded successfully at this stage). If, whilst on the first page, there is an error in uploading then I wish to generate an error message (prob a Javascript popup) and leave the field blank.
    Last edited by spman; 07-26-2012 at 09:36 PM.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,976
    Thanks
    15
    Thanked 229 Times in 229 Posts
    I don't know how to do what you want, post a file without loading a new page, but I certainly do know how to refill the form with the old data after the new page loads. Exactly how you do it depends on the type of inputs in the form field, if they're all text or textarea inputs it's very easy, a bit more complicated if you have selects, radio buttons and check boxes. If it's all text inputs you have just declare a javascript array, have a php loop push data into the array, have a javascript loop go over the input elements and put the array data in as values. Just that simple.

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    54
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by DrDOS View Post
    I don't know how to do what you want, post a file without loading a new page, but I certainly do know how to refill the form with the old data after the new page loads. Exactly how you do it depends on the type of inputs in the form field, if they're all text or textarea inputs it's very easy, a bit more complicated if you have selects, radio buttons and check boxes. If it's all text inputs you have just declare a javascript array, have a php loop push data into the array, have a javascript loop go over the input elements and put the array data in as values. Just that simple.
    Hey DrDOS, thank you for the answer! Unfortunately there are selects, radio buttons etc... However, I guess it's still doable.

    Here is the logic I was thinking of :

    1. User enters all form data and clicks submit - data is POST'ed to step2code.php

    2. step2code.php runs and, firstly, checks if the files have been uploaded OK - If YES then carry on processing everything else!

    If NO then call write all the variables to a file on the server in the format of a PHP file with starting and ending php tags and the correct variable names - eg: one line of the file might be :

    $description=$_POST["description"];

    Then, call another PHP file that is similar to the original form but includes the text file. This then outputs the form again via a PHP EOT block but substitutes all the "value" type items in the form with the variable names (or does some jiggling with "selected" attributes for selection drop downs etc...)

    That would, in theory, allow me to "refill" the form with all of the previous data...

    It does seem a long winded way around it though LOL!

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,976
    Thanks
    15
    Thanked 229 Times in 229 Posts
    I don't know why the way you propose wouldn't work. You've got to know what will work best for you.

  • #5
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,536
    Thanks
    45
    Thanked 259 Times in 256 Posts
    With PHP alone, you can't do what you want. You can use Javascript and AJAX to upload a file without refresh, I THINK. I know you can definitely do what you want, as you have flash file upload scripts left and right, and I'm pretty confident its the Javascript that does the upload via AJAX, with the Flash merely acting as an interface.

    But with PHP alone, no go. PHP doesn't allow you to do stuff without a page reload. However, you can mock it by doing more or less what you're saying: store values somewhere (session?), and display either old data or blanks based on whether the file is uploaded or not.

  • #6
    New Coder
    Join Date
    Nov 2011
    Posts
    54
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Keleth View Post
    With PHP alone, you can't do what you want. You can use Javascript and AJAX to upload a file without refresh, I THINK. I know you can definitely do what you want, as you have flash file upload scripts left and right, and I'm pretty confident its the Javascript that does the upload via AJAX, with the Flash merely acting as an interface.

    But with PHP alone, no go. PHP doesn't allow you to do stuff without a page reload. However, you can mock it by doing more or less what you're saying: store values somewhere (session?), and display either old data or blanks based on whether the file is uploaded or not.
    I am thinking about this more and more and it seems such an inelegant solution LOL! I am rethinking this now and I have another idea. I could build a kind of "media library" whereby they can upload images into the "media library" from the main menu panel beforehand.

    I can then, on the form, give them the option to press a button that brings up a modal window with the contents of the media library displayed in it (generated by PHP).

    Each image could have a radio button associated with it and the value would be the absolute URL of the image.

    How could I pass this radio button value BACK to the parent window so I can populate the URL field with it? The popup would essential be an HTML form but I would want the "submit" to return the value.

  • #7
    Regular Coder
    Join Date
    Jul 2012
    Location
    London
    Posts
    473
    Thanks
    4
    Thanked 86 Times in 86 Posts
    You have to ajax.

    Tutorial here: http://www.devrecipes.com/2009/07/13...-page-refresh/

    Modify their form!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •