upload a file in the same page as the form using php and ajax not working

Question

Trying to upload a file using php/ajax but seems like its not working, maybe its not recognizing the $_FILES["file_name"]["tmp_name"] variable in the upload_file.php because I could not display it in the page.

Can you please help!

index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="upload_file.js"></script>

<form action="" method="POST" enctype="multipart/form-data">
<input type="file" name="file_name" id="file_name" />
<input type="submit" name="submit" value="RUN" id ="btnSubmit"> 
</form>

<div id='upload_here_div'></div>

upload_file.js

$(document).ready(function(){

    console.log(file_name +'uplooad');

    $('#btnSubmit').click(function(e) {

        console.log('click trigger');
        var file_name           = $("#file_name").val();


        $("#upload_here_div").load("upload_file.php?file_name=" + client_info )
        console.log('value for file_name=' + file_name ); //
      });

});

upload_file.php

<?php
$file_name  = $_REQUEST['file_name'];

if ( isset($_FILES["file_name"])) {

    //if there was an error uploading the file
    if ($_FILES["file_name"]["error"] > 0) {
        echo "Return Code: " . $_FILES["file_name"]["error"] . "<br />";
    }
    else {

          $file_locatioon = "upload/".$file_name ;
          echo 'file_locatioon = '.$file_locatioon."<br>";
          move_uploaded_file($_FILES["file_name"]["tmp_name"], $file_locatioon);
          echo "ploaded!!<br>";
    }

 } else {echo "No file selected <br />";}
?>

Where are you sending the file? I see a `.load` call but that is not a post request, let alone a `multitype/form-data` — Halcyon, Jun 11 '15 at 01:01
you're using `['file_name']` and `["file"]` and the input bears `name="file_name" id="file_name"` - Consult the manual http://php.net/manual/en/function.move-uploaded-file.php and check for errors http://php.net/manual/en/function.error-reporting.php — Funk Forty Niner, Jun 11 '15 at 01:01
@Halcyon, Thank you for the feedback! what you mean with let alone a `multitype/form-data` ? — mongotop, Jun 11 '15 at 01:11
@Fred-ii- sorry, that was just a typo in my behalf. I'm using `file_name` in all the files. corrected! — mongotop, Jun 11 '15 at 01:12
Your `upload_file.php` is set up to receive a `multipart/form-data` request but you seem to be sending it a plain GET request. How are you sending the file? — Halcyon, Jun 11 '15 at 01:12
I doubt that you can use `$file_name = $_REQUEST['file_name'];` as a filename. More like `$file_name = $_FILES["file_name"]["name"];` as per the manual http://php.net/manual/en/function.move-uploaded-file.php and make sure the folder is writeable. Sidenote: I only know serverside. JS stuff, is out of my scope. — Funk Forty Niner, Jun 11 '15 at 01:16
@Halcyon I removed `multipart/form-data` from enctype and changed POST to GET for the form method, and the file still not uploaded to the `upload` folder — mongotop, Jun 11 '15 at 01:29
^ no don't do that ^^^^^^^^^^^^^^ files work with POST not GET and an enctype is required. — Funk Forty Niner, Jun 11 '15 at 01:30
@Fred-ii- the folder is writeable and changing `$_REQUEST['file_name']` to `$_FILES["file_name"]["name"]` didn't change the output. thank you so much for looking into this questions! — mongotop, Jun 11 '15 at 01:35
@Fred-ii- :/ I did change it back and now I get the message `No file selected ` maybe $_FILES["file_name"]["name"] is not being used properly? — mongotop, Jun 11 '15 at 01:38
You're welcome. It's hard to say. Like I said earlier, I don't know JS enough to help out any further, I work server-side for the most part. TBH, when someone asks me to install something like that, I just find a script out there that works from demos lol I just modify the PHP to my liking afterwards. — Funk Forty Niner, Jun 11 '15 at 01:50

score 1 · Answer 1 · edited May 23 '17 at 12:22

1

I think you get a same problem with this jQuery Ajax File Upload. Maybe it is helpful for you.

edited May 23 '17 at 12:22

Community

1
1

answered Jun 11 '15 at 01:50

Gary Liu

13,758
1
17
32

score 1 · Accepted Answer · answered Jun 12 '15 at 10:31

1

I found this tutorial before and tested OK. By using FormData may give what you want.
But please take the browser compatibility in consider. For more information please reference here.

answered Jun 12 '15 at 10:31

Javakid

357
1
10

upload a file in the same page as the form using php and ajax not working

2 Answers2