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>

Prashant Kyada · Accepted Answer · 2014-11-08 12:08:46Z

0

    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;

answered Nov 8, 2014 at 12:08

Prashant Kyada

237 bronze badges

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

5 Comments

IgorAlves Over a year ago

Hi Prashant, could you rewrite the beginnig of your idea? It was broked. I could not understant the complete idea.

Prashant Kyada Over a year ago

only file name store in database create a folder user_post file copy in this folder try this code.

Prashant Kyada Over a year ago

particulate folder path domain name.com/user_post/ your domain and folder name.

IgorAlves Over a year ago

ok, and how to identify user_post? How do I know who is sending this file?

IgorAlves Over a year ago

Hi, I developed a solution to do that without too many code. I will put the solution in the answer. Thanks you gave-me the idea.

IgorAlves · Accepted Answer · 2014-11-08 17:04:30Z

Finally I developed a solution.

Add a class "fileUpload" to the input element that will hold the file to be uploaded.
Set a id as something-pkUser. I sit id="fileUpload-1" dynamically created whit php.
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).
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.

Collectives™ on Stack Overflow

How to send data to server while upload file?

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related