How to send data to server while upload file?

Question

When a user uploads a picture to a server, the picture must to be stored like pkUsre.extention, exemple 1.jpg, where the number 1 is the users primary key. I have the follow code that works fine to upload the file, but I dont know how to send the pkUser to server with the picture. Any idea how to do that?

//Html code
   <form id="form1" enctype="multipart/form-data" method="post" >
    <div class="row">
      <input type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
    </div>
    <div id="fileName"></div>
    <div id="fileSize"></div>
    <div id="fileType"></div>
    <div class="row">
      <input type="button" id="btnSd"  value="Upload" />
    </div>
    <div id="progressNumber"></div>
  </form>

//PHP code
    if ( move_uploaded_file( $_FILES['fileToUpload']['tmp_name'], "pic/".      basename($_FILES['fileToUpload']['name']) ) ) {
        echo basename($_FILES['fileToUpload']['name']);
    }
    else {
        echo "There was a problem uploading your file - please try again.";
    }   

//Javascript code
    <script type="text/javascript">
      function fileSelected() {
        var file = document.getElementById('fileToUpload').files[0];
        if (file) {
          var fileSize = 0;
          if (file.size > 1024 * 1024)
            fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
          else
            fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';

          document.getElementById('fileName').innerHTML = 'Name: ' + file.name;
          document.getElementById('fileSize').innerHTML = 'Size: ' + fileSize;
          document.getElementById('fileType').innerHTML = 'Type: ' + file.type;
        }
      }

      function uploadFile() {
        var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEventListener("abort", uploadCanceled, false);
        xhr.open("POST", "uploadFoto.php");
        xhr.send(fd);
      }

      function uploadProgress(evt) {
        if (evt.lengthComputable) {
          var percentComplete = Math.round(evt.loaded * 100 / evt.total);
          document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
        }
        else {
          document.getElementById('progressNumber').innerHTML = 'unable to compute';
        }
      }

      function uploadComplete(evt) {
        /* This event is raised when the server send back a response */
        alert(evt.target.responseText);
      }

      function uploadFailed(evt) {
        alert("There was an error attempting to upload the file.");
      }

      function uploadCanceled(evt) {
        alert("The upload has been canceled by the user or the browser dropped the connection.");
      }
    </script> 
   <script type="text/javascript">
       $(document).on("click", "#btnSd", function(){
          uploadFile();      
       });     
   </script>

Answer 1

Finally I developed a solution.

1. Add a class "fileUpload" to the input element that will hold the file to be uploaded.
2. Set a id as something-pkUser. I sit id="fileUpload-1" dynamically created whit php.
3. Make a little change on the javascript code above. Go to the function uploadFile() and create a parameter "n". It will be like that uploadFile(n).

4. Inside this function go to the fd.append(...,...) part and change the first an second parameter 'fileToUpload' for "n", you have created. You will have the follow:

   fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);

changed by this:

fd.append(n, document.getElementById(n).files[0]);

Now you must change jquery code:

before was that:

$(document).on("click", "#btnSd", function(){
        uploadFile();      
    }); 

Now will be like that:

$(document).on("click", "#btnSd", function(){
        uploadFile($(".fileToUpload").attr('id'));      
    });  

And finally, ajax will send will send data to server. We can clear the string with php substrigs functions. This was my solution:

foreach ($_FILES as $key => $value) {
$arrFile = $key;                           
$pkUser = substr($arrFile,(int)$pos=strpos($arrFile, "-")+1);    
$filename=$_FILES[$arrFile]['name'];
$ext = substr($filename,strpos($filename, ".")); 
}

$finalName=$pkUser.$ext;

    if ( move_uploaded_file( $_FILES[$arrFile]['tmp_name'], "pic/".$finalName ) ) {
        echo $finalName;
    }
    else {
        echo "There was a problem uploading your file - please try again.";
    }    

Finally this works good! I can send the user's primary key and store as I want.

Answer 2

    only file uplod name in server database and move to file in folder user_post.
    file copy in filder and only name is database save.


    function getuniqkey($special='')
        {
            return md5(date("Y-m-d H:i:s").uniqid(rand(), true).time().$special);
        }
    if(isset($_FILES["fileToUpload"]))
        {
            $tmp_name = $_FILES["fileToUpload"]["tmp_name"];
            $name1 = $_FILES["fileToUpload"]["name"];       
            $datasheet_new_name=getuniqkey($tmp_name).substr($name1,strrpos($name1,"."));
            if(copy($_FILES["fileToUpload"]["tmp_name"], "user_post/".$datasheet_new_name))
            {
                $file_name = "http://domain name.com/user_post/{$datasheet_new_name}";
            }
            else
            {   
                echo'user file not upload.';


            }

    }        
    echo $file_name;