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 !';
            }
        }
    }

Answer 1

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

Answer 2

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 !';
            }
        }
    }

Answer 3

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.