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如下：

//拖放照片上传（function（）{

    // 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（在Javascript方面指定的POST URL）需要是完全限定的路径而不是相对路径。然而，我无法看到值，但似乎是代码中$id("upload").action的值。如果您有权访问apache日志，则可以通过查看apache日志来确认这是原因。如果您在尝试发送文件时看到404错误，那么这就是您的问题。多数民众承认假设请求甚至完全击中了您的服务器。

拖放图片上传无法在服务器上运行

2 个答案: