Php Upload File With JavaScript

Question

I Try to upload with javascript I send ajax but I can't find problem my code not work where is problem ?

index.php

<input type="file" id="photoUploadFile"/>

script js

var full_photo_name = document.getElementById('photoUploadFile').value;
var photo_name = full_photo_name.substr(full_photo_name.lastIndexOf("\\")+1, full_photo_name.length);
$.ajax({
    type: "POST",
    url: "register_photo.php",
    data: { photo_name : photo_name },
    success: function(data) {
        }
    });

register_photo.php

upload_photo($_POST['photo_name']); // i upload with this function but show me error: Sorry!

function upload_photo($file_name) {
        global $Root_Directory;

        $target_dir = $Root_Directory. 'uploads/';
        $target_file = $target_dir. $file_name;
        $uploadOk = 1;

        if ($uploadOk == 0) {
            echo "Sorry, your file was not uploaded.";
        } else {
            if (move_uploaded_file($file_name, $target_file)) {
                echo 'File: '. $file_name. ' has been uploaded.';
            } else {
                echo 'Sorry !';
            }
        }
    }

Seems you don't understand process of file upload. Passing filepath to server doesn't mean that file is uploaded. — u_mulder, Jul 22 '16 at 06:24
Possible duplicate of [How can I upload files asynchronously?](http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously) — u_mulder, Jul 22 '16 at 06:27

score 0 · Answer 1 · answered Jul 22 '16 at 06:33

change your ajax like this

var formdata = new FormData();    
formdata.append( 'file', input.files[0] );

$.ajax({
  url: 'register_photo.php',
  data: formdata,
  processData: false,
  contentType: false,
  type: 'POST',
  success: function(data){
    alert(data);
  }
});

In register_photo.php Use move_uploaded_file to save

score 0 · Answer 2 · answered Jul 22 '16 at 06:34

In your ajax request you can use something like this.

 var file_data = $('#photoUploadFile').prop('files')[0];   
    var form_data = new FormData();                  
    form_data.append('file_name', file_data);
    $.ajax({
        url: "register_photo.php",
        cache: false,
        data: form_data,                         
        type: 'post',
        success: function(result){
            alert(result);
        }
    });

In your PHP code

upload_photo($_FILES['file_name']); // i upload with this function but show me error: Sorry!

function upload_photo($file_name) {
        global $Root_Directory;

        $target_dir = $Root_Directory. 'uploads/';
        $target_file = $target_dir. $file_name;
        $uploadOk = 1;

        if ($uploadOk == 0) {
            echo "Sorry, your file was not uploaded.";
        } else {
            if (move_uploaded_file($file_name['tmp_name'], $target_file)) {
                echo 'File: '. $file_name. ' has been uploaded.';
            } else {
                echo 'Sorry !';
            }
        }
    }

what error you are getting exactly?, have you tried with inspect element. Network tab? — Haresh Vidja, Jul 22 '16 at 07:36
please check data is available in $_FILES? by print_r($_FILES) — Haresh Vidja, Jul 22 '16 at 14:22
I can give you right hint only ... You have a code I have not :) — Haresh Vidja, Jul 22 '16 at 14:29

score 0 · Answer 3 · answered Jul 22 '16 at 06:41

The best way to send the file is to submit it using a form and then receiving it on server and then processing it with php or what ever language you are using.

You have to understand that the client and the server are two different entities and sending the file name in ajax will not help.

put the input element in form.

   <form id="frmsendfile" method="post" target="fileprocess.php">
    <input type="file" id="photoUploadFile"/>
   </form>

Now we write a javascript function that will submit the form to your server after you have browsed the file. you can add validation. I am just going to give you an idea how you can do this.

  <script type="text/javascript">
   var submitFile = function(){
    var frm = document.forms[0];
    if(frm)
      {
       frm.submit();
      }
   };

you need to call submitFile() function to send the file.

Php Upload File With JavaScript

3 Answers3