Как отправить данные на сервер во время загрузки файла?

Question

Когда пользователь загружает изображение на сервер, изображение должно храниться как pkUsre.extention, example 1.jpg, где число 1 является первичным ключом пользователя. У меня есть следующий код, который отлично подходит для загрузки файла, но я не знаю, как отправить pkUser на сервер с изображением. Любая идея, как это сделать?

//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

Наконец я разработал решение.

1. Добавить класс «fileUpload» к элементу ввода, который будет содержать загружаемый файл.
2. Задайте идентификатор как-то-pkUser. Я сижу id = "fileUpload-1" динамически созданный whit php.
3. Сделайте небольшое изменение в приведенном выше javascript-коде. Перейдите к функции uploadFile() и создайте параметр «n». Это будет подобно uploadFile (n).

4. Внутри этой функции перейдите к части fd.append (..., ...) и измените первый второй параметр «fileToUpload» для «n», который вы создали. У вас будет следующее:

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

изменена следующим образом:

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

Теперь вы должны изменить код JQuery:

до того, что:

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

Теперь будет так:

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

И, наконец, ajax отправит отправку данных на сервер. Мы можем очистить строку с помощью функций php substrigs. Это было моим решением:

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."; 
    }  

И, наконец, это работает хорошо! Я могу отправить первичный ключ пользователя и сохранить его, как я хочу.

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;