How to get the Uploaded file name in php if the file is uploaded by using ajax jquery file upload

Question

This is a simple file upload script.I just need the the name of the file that i uploaded in the php part as i need that uploaded file[along with its path] for inserting that to the database. Here is a script.

index.html

<form enctype="multipart/form-data" id="form1">
    <input name="file" type="file" id="id1" />
    <input type="button" value="Upload" />
</form>
<progress></progress>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(':file').on('change', function() {
    var file = this.files[0];
    if (file.size > 10024000000) {
        alert('max upload size is 1k')
    }
    // Also see .name, .type
});
</script>
<script>
$(':button').on('click', function() {
$.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',
        // Form data
        data: new FormData($('form')[0]),
        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
    });
});
</script>

upload.php

<?php
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name']);
$name = $_FILES['file']['tmp_name'];
echo $name;//i tried this but i know as i uploaded file using ajax it will not work

 ?>

Your problem it's connected to the way you are sending and receiving the data from your ajax. You have to create a success function to receive your data in your ajax. — Jose Marques
– Jose Marques, Commented Jun 16, 2017 at 11:20
Since you are using Jquery Ajax to upload the file, you will not get the file in the $_FILES variable. The file will be sent a binary data in the $_POST variable You should use file_put_contents() function to write the contents to the file. E.G. file_put_contents('img.jpg', $_POST['file']); — Vivek D.
– Vivek D., Commented Jun 16, 2017 at 11:24
I tried for below mentioned php code also.In that code i am printing $_POST.It is also not working. — Manasa
– Manasa, Commented Jun 16, 2017 at 11:27
If you are not getting anything in the $_POST then you have a problem in the Ajax code. — Vivek D.
– Vivek D., Commented Jun 16, 2017 at 11:35

Jose Marques · Accepted Answer · 2017-06-16 12:09:44Z

1

For the implementation of the sucess function use this code.

JS:

$(':button').on('click', function() {
$.ajax({
        // Your server script to process the upload
        url: 'upload.php',
        type: 'POST',
        // Form data
        data: new FormData($('form')[0]),
        // Tell jQuery not to process data or worry about content-type
        // You *must* include these options!
        cache: false,
        contentType: false,
        processData: false,

        // Custom XMLHttpRequest
        xhr: function() {
            var myXhr = $.ajaxSettings.xhr();
            if (myXhr.upload) {
                // For handling the progress of the upload
                myXhr.upload.addEventListener('progress', function(e) {
                    if (e.lengthComputable) {
                        $('progress').attr({
                            value: e.loaded,
                            max: e.total,
                        });
                    }
                } , false);
            }
            return myXhr;
        },
         success: function(data)
        {
         alert(data);//Note that sometimes ajax misinterprets the data that is returned. To not have this problem, declare the type of data you expect to receive.
        }
    });
    });

PHP:

move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name']);
$name = $_FILES['file']['tmp_name'];
echo $name;

If you want to send back more than one value, use Json encode to send back the data.

Code for this:

PHP:

move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/'.$_FILES['file']['name']);
$name = $_FILES['file']['tmp_name'];
$path = 'uploads/'.$_FILES['file']['name'];
echo json_encode(array(
                'name'=> $name,
                'path'=> $path
));

JS:

 ...
  success: function(data){
    alert("Name: "+data.name);
    alert("Path: "+data.path);
  }

Note that sometimes ajax misinterprets the data that is returned. To not have this problem, declare the type of data you expect to receive.

edited Jun 16, 2017 at 12:09

answered Jun 16, 2017 at 11:43

Jose Marques

7481 gold badge7 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manasa Over a year ago

Yes after writing success function i can able to see the output statements .I am getting path also

Manasa Over a year ago

Thank You so much

Bibhudatta Sahoo · Accepted Answer · 2017-06-16 11:29:18Z

1

I thing you can get the path in your php code Do like this

$info = pathinfo($_FILES['userFile']['name']);
$ext = $info['extension']; // get the extension of the file
$newname = "newname.".rand(0,999).$ext;
$target = 'images/'.$newname;
move_uploaded_file( $_FILES['userFile']['tmp_name'], $target)

Here $target is contain the file path which you can store in our DB.

answered Jun 16, 2017 at 11:29

Bibhudatta Sahoo

4,9142 gold badges31 silver badges53 bronze badges

2 Comments

Manasa Over a year ago

Thank You so much

Bibhudatta Sahoo Over a year ago

@Manasa happy to hear that our issue got fixed.

Collectives™ on Stack Overflow

How to get the Uploaded file name in php if the file is uploaded by using ajax jquery file upload

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related