拖放圖像上傳不起作用在服務器上

Question

我想實現一個拖放圖像上傳。 我在網上找到了一個相當簡單的腳本，並適合於我的使用。 在我的本地安裝中，文件上傳完全正常，但不在服務器上。 從我的調試嘗試中，$ _SERVER ['HTTP_X_FILENAME']甚至不會被php設置。

我試過如下： - 確保上傳文件夾設置爲755 - 更改PHP臨時上傳路徑，增加允許的最大文件大小

任何形式的PHP或JS錯誤發生。由於我有死（print_r（$ _ SERVER））;在PHP中，我使用chrome檢查器獲取$ _SERVER轉儲，它不包含HTTP_X_FILENAME索引。

我的PHP是：

<?php 
$fn = (isset($_SERVER['HTTP_X_FILENAME']) ? $_SERVER['HTTP_X_FILENAME'] : false); 

if ($fn) { 

     // AJAX call 
     file_put_contents(
     '../usr/photos/' . $fn, 
     file_get_contents('php://input') 
     ); 
     echo "$fn uploaded"; 
     exit(); 

} 
else { 
     // form submit 
    if(!$_FILES['fileselect']) die(print_r($_SERVER)); 
    else $files = $_FILES['fileselect']; 

    foreach ($files['error'] as $id => $err) { 
    if ($err == UPLOAD_ERR_OK) { 
     $fn = $files['name'][$id]; 
     move_uploaded_file(
      $files['tmp_name'][$id], 
      '../usr/photos/' . $fn 
     ); 
     echo "<p>File $fn uploaded.</p>"; 
    } 
    } 
} 

的JS如下：

//拖放照片上傳 （函數（）{

// getElementById 
    function $id(id) { 
     return document.getElementById(id); 
    } 


    // output information 
    function Output(msg) { 
     var m = $id("messages"); 
     m.innerHTML = msg + m.innerHTML; 
    } 


    // file drag hover 
    function FileDragHover(e) { 
     e.stopPropagation(); 
     e.preventDefault(); 
     e.target.className = (e.type == "dragover" ? "hover" : ""); 
    } 


    // file selection 
    function FileSelectHandler(e) { 

     // cancel event and hover styling 
     FileDragHover(e); 

     // fetch FileList object 
     var files = e.target.files || e.dataTransfer.files; 

     // process all File objects 
     for (var i = 0, f; f = files[i]; i++) { 
      ParseFile(f); 
      UploadFile(f); 
     } 

    } 


    // output file information 
    function ParseFile(file) { 

     /*Debug*/ 
     Output(
      "<p>File information: <strong>" + file.name + 
      "</strong> type: <strong>" + file.type + 
      "</strong> size: <strong>" + file.size + 
      "</strong> bytes</p>" 
     ); 

     // display an image 
     if (file.type.indexOf("image") == 0) { 
      var reader = new FileReader(); 
      reader.onload = function(e) { 
       Output(
        "<p>" + 
        //"<strong>" + file.name + ":</strong><br />" + 
        '<img width="130" height="100" src="' + e.target.result + '" />' + 
        '<br />' + 
        '<input type="text" name="photo_name" value="'+ file.name +'" />' + 
        '<br />' + 
        '<input type="text" name="photo_caption" value="Caption" /></p>' 
       ); 
      } 
      reader.readAsDataURL(file); 
     } 

     // display text 
     if (file.type.indexOf("text") == 0) { 
      var reader = new FileReader(); 
      reader.onload = function(e) { 
       Output(
        "<p><strong>" + file.name + ":</strong></p><pre>" + 
        e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") + 
        "</pre>" 
       ); 
      } 
      reader.readAsText(file); 
     } 

    } 


    // upload JPEG files 
    function UploadFile(file) { 

     // following line is not necessary: prevents running on SitePoint servers 
     if (location.host.indexOf("sitepointstatic") >= 0) return 

     var xhr = new XMLHttpRequest(); 
     if (xhr.upload && (file.type == "image/jpeg" || file.type == "image/png") && file.size <= $id("MAX_FILE_SIZE").value) { 

      // create progress bar 
      var o = $id("progress"); 
      var progress = o.appendChild(document.createElement("p")); 
      progress.appendChild(document.createTextNode("upload " + file.name)); 


      // progress bar 
      xhr.upload.addEventListener("progress", function(e) { 
       var pc = parseInt(100 - (e.loaded/e.total * 100)); 
       progress.style.backgroundPosition = pc + "% 0"; 
      }, false); 

      // file received/failed 
      xhr.onreadystatechange = function(e) { 
       if (xhr.readyState == 4) { 
        progress.className = (xhr.status == 200 ? "success" : "failure"); 
       } 
      }; 

      // start upload 
      xhr.open("POST", $id("upload").action, true); 
      xhr.setRequestHeader("X_FILENAME", file.name); 
      xhr.send(file); 

     } 

    } 


    // initialize 
    function Init() { 

     var fileselect = $id("fileselect"), 
      filedrag = $id("filedrag"), 
      submitbutton = $id("submitbutton"); 

     // file select 
     fileselect.addEventListener("change", FileSelectHandler, false); 

     // is XHR2 available? 
     var xhr = new XMLHttpRequest(); 
     if (xhr.upload) { 

      // file drop 
      filedrag.addEventListener("dragover", FileDragHover, false); 
      filedrag.addEventListener("dragleave", FileDragHover, false); 
      filedrag.addEventListener("drop", FileSelectHandler, false); 
      filedrag.style.display = "block"; 

      // remove submit button 
      submitbutton.style.display = "none"; 
     } 

    } 

    // call initialization file 
    if (window.File && window.FileList && window.FileReader) { 
     Init(); 
    } 


})(); 

預先感謝您。

Answer 1

您現在可能已經解決了您的問題，但是我在此處發佈此解決方案以幫助其他人在此處遇到相同問題。在你的js，有這樣一行

xhr.setRequestHeader("X_FILENAME", file.name); 

但應該讀

xhr.setRequestHeader("X-FILENAME", file.name); 

因爲下劃線棄用更高版本Apache發佈（另見 Header names with underscores ignored in php 5.5.1/apache 2.4.6）

Answer 2

我在其中一個Ubuntu WAMP安裝上遇到了這個問題。您的上傳URL（POS T在URL上指定的URL）需要是完全合格的路徑而不是相對路徑。但是我看不到這個值，但似乎是$id("upload").action在代碼中的值。如果你有權訪問它們，你可以通過查看apache日誌來確認這是原因。如果您在嘗試發送文件時看到404錯誤，那麼這就是您的問題。這就是假設請求甚至會觸發你的服務器。