拖放图像上传不起作用在服务器上

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错误，那么这就是您的问题。这就是假设请求甚至会触发你的服务器。