PHP和javascript无法将文件发布到远程服务器，而发布到本地服务器

Question

I do have the following pages one which is doing drag and drop and the other one to get the file written. 我确实有以下页面，一个页面正在执行拖放操作，另一页面正在编写文件。 In case the drag and drop is writning locally, no problems, in case of remote , not working. 如果拖放操作是在本地编写的，则没有问题；如果是远程操作，则不起作用。

 <!DOCTYPE html>
 <html>
 <head>
   <title> BETA APP HOME PAGE </title>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
   <link rel="stylesheet" href="CSS/style.css">
 </head>
 <body>
 <ul>
   <li><a class="active" href='demo_upload.php'>demo upload</a></li>
 </ul>

 <div style="margin-left:15%;padding:1px 16px;height:1000px;">
 <a id="topright" href="#" title="RaspBerry Pi"></a>
   <h1> DEMO USING FILE UPLOAD</h1>
 <p></p>


 <?php
 if (isset($_POST['STARTSCRIPT']))
 {
 $command = escapeshellcmd('sudo python  AppPy/cgi-bin/test.py');
 $output = shell_exec($command);
 echo("on");
 echo $output;
 }
 if (isset($_POST['STOPSCRIPT']))
 {
 shell_exec("sudo python  AppPy/cgi-bin/test.py");
 echo("Off");
 }
 ?>

 <form method="post">
 <button name="STARTSCRIPT">START SCRIPT</button>&nbsp;
 <button name="STOPSCRIPT">STOP SCRIPT</button><br><br>
 </form> 

 <div id="dragandrophandler">Drag & Drop Files Here </div>
 <br><br>
 <div id="status1"></div> 
 <script>
 function sendFileToServer(formData,status)
 {
     var uploadURL ="http://192.168.56.153/WEBAPP/upload.php"; //Upload URL
     var extraData ={}; //Extra Data.
     var jqXHR=$.ajax({
             xhr: function() {
             var xhrobj = $.ajaxSettings.xhr();
             if (xhrobj.upload) {
                     xhrobj.upload.addEventListener('progress', function(event) {
                         var percent = 0;
                         var position = event.loaded || event.position;
                         var total = event.total;
                         if (event.lengthComputable) {
                             percent = Math.ceil(position / total * 100);
                         }
                         //Set progress
                         status.setProgress(percent);
                     }, false);
                 }
             return xhrobj;
         },
     url: uploadURL,
     type: "POST",
     contentType:false,
     processData: false,
         cache: false,
         data: formData,
         success: function(data){
             status.setProgress(100);

             //$("#status1").append("File upload Done<br>");         
         }
     }); 

     status.setAbort(jqXHR);
 }

 var rowCount=0;
 function createStatusbar(obj)
 {
      rowCount++;
      var row="odd";
      if(rowCount %2 ==0) row ="even";
      this.statusbar = $("<div class='statusbar "+row+"'></div>");
      this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
      this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
      this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
      this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
      obj.after(this.statusbar);

     this.setFileNameSize = function(name,size)
     {
         var sizeStr="";
         var sizeKB = size/1024;
         if(parseInt(sizeKB) > 1024)
         {
             var sizeMB = sizeKB/1024;
             sizeStr = sizeMB.toFixed(2)+" MB";
         }
         else
         {
             sizeStr = sizeKB.toFixed(2)+" KB";
         }

         this.filename.html(name);
         this.size.html(sizeStr);
     }
     this.setProgress = function(progress)
     {       
         var progressBarWidth =progress*this.progressBar.width()/ 100;  
         this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% ");
         if(parseInt(progress) >= 100)
         {
             this.abort.hide();
         }
     }
     this.setAbort = function(jqxhr)
     {
         var sb = this.statusbar;
         this.abort.click(function()
         {
             jqxhr.abort();
             sb.hide();
         });
     }
 }
 function handleFileUpload(files,obj)
 {
    for (var i = 0; i < files.length; i++) 
    {
         var fd = new FormData();
         fd.append('file', files[i]);

         var status = new createStatusbar(obj); //Using this we can set progress.
         status.setFileNameSize(files[i].name,files[i].size);
         sendFileToServer(fd,status);

    }
 }
 $(document).ready(function()
 {
 var obj = $("#dragandrophandler");
 obj.on('dragenter', function (e) 
 {
     e.stopPropagation();
     e.preventDefault();
     $(this).css('border', '2px solid #0B85A1');
 });
 obj.on('dragover', function (e) 
 {
      e.stopPropagation();
      e.preventDefault();
 });
 obj.on('drop', function (e) 
 {

      $(this).css('border', '2px dotted #0B85A1');
      e.preventDefault();
      var files = e.originalEvent.dataTransfer.files;

      //We need to send dropped files to Server
      handleFileUpload(files,obj);
 });
 $(document).on('dragenter', function (e) 
 {
     e.stopPropagation();
     e.preventDefault();
 });
 $(document).on('dragover', function (e) 
 {
   e.stopPropagation();
   e.preventDefault();
   obj.css('border', '2px dotted #0B85A1');
 });
 $(document).on('drop', function (e) 
 {
     e.stopPropagation();
     e.preventDefault();
 });

 });


 </script>


 </div>
 </div>
 <div style="margin-left:15%;padding:1px 16px;height:10px;">

 </div>
 </body>
 </html>

My problem is when I specify my current server : 我的问题是当我指定当前服务器时：

 var uploadURL ="http://192.168.56.153/WEBAPP/upload.php"

it does work with this : 它确实可以：

 chmod -R 0777 /var/www/html/WEBAPP/

This is only for test ( to get ride of rights issues), I get this response from the local server in apache access log : 这仅用于测试（以解决权限问题），我在apache访问日志中从本地服务器获得此响应：

 192.168.56.1 - - [08/Apr/2017:14:07:44 +0200] "POST /WEBAPP/upload.php HTTP/1.1" 200 203 "http://192.168.56.153/WEBAPP/demo_upload.php" "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko"

My file is being uploaded. 我的文件正在上传。

But when I change this to this destination to a remote : 但是当我将其更改为此目标到远程：

 var uploadURL ="http://192.168.56.154/WEBAPP/upload.php"

I got this message at remote server apache access log : 我在远程服务器apache访问日志中收到此消息：

 192.168.56.1 - - [08/Apr/2017:13:44:13 +0200] "OPTIONS /WEBAPP/upload.php HTTP/1.1" 200 203 "-" "Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; rv:11.0) like Gecko"

No file uploaded. 没有文件上传。

The upload.php file is the same either situation : 两种情况下的upload.php文件都相同：

 <?php

 $ds = DIRECTORY_SEPARATOR; //1

 $storeFolder = 'uploads'; //2

 if (!empty($_FILES)) {

 $tempFile = $_FILES['file']['tmp_name']; //3

 $targetPath = dirname( __FILE__ ) . $ds. $storeFolder . $ds; //4

 $targetFile = $targetPath. $_FILES['file']['name']; //5

 move_uploaded_file($tempFile,$targetFile); //6

 }


  ?>

Answer 1

You obtain a request of type OPTIONS because of CORS. 由于CORS，您将获得OPTIONS类型的请求。 Domain from which the JavaScript script was loaded must be the same as the domain of the request. 加载JavaScript脚本的域必须与请求的域相同。 Cross-origin requests are forbidden, that is why they often are transformed to OPTIONS requests. 跨域请求被禁止，这就是为什么它们经常被转换为OPTIONS请求的原因。

However, you can allow cross-domain requests by setting response header Access-Control-Allow-Origin: * . 但是，您可以通过设置响应头Access-Control-Allow-Origin: *来允许跨域请求。 See HTTP access control (CORS) for details. 有关详细信息，请参见HTTP访问控制（CORS）。

PHP和javascript无法将文件发布到远程服务器，而发布到本地服务器

问题描述

1 个解决方案

解决方案1
1 已采纳 2017-04-08 14:20:17

PHP和javascript无法将文件发布到远程服务器，而发布到本地服务器

问题描述

1 个解决方案

解决方案1 1 已采纳 2017-04-08 14:20:17

解决方案1
1 已采纳 2017-04-08 14:20:17