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

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.

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

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

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.

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

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Related