拖和拖放图片上传不工作的服务器

我想实现一拖和拖放图片上传。 我发现了一个相当简单的脚本在线和适应我的使用。 在我的本地安装文件上传完全正常，但不能在服务器上。 从我的调试尝试的$ _ SERVER ['HTTP_X_FILENAME']甚至没有得到由PHP的设置。

I am trying to implement a drag-and-drop image upload. I found a rather simple script online and adapted to my use. On my local installation the file uploads perfectly fine, but not on the server. From my debugging attempts the $_SERVER['HTTP_X_FILENAME'] does not even get set by php.

我试过如下： - 确保上载文件夹设置为755 - 改变PHP临时上传路径，增加允许的最大文件大小

I tried the following: - Making sure that the upload folder is set to 755 - Changing the php temporary upload path and increasing the maximum allowed file size

任何形式的PHP或JS错误发生。 因为我有模（的print_r（$ _ SERVER））;在PHP中，我得到使用Chrome检查的$ _ SERVER转储，它不包含HTTP_X_FILENAME指数。

No php or js errors of any kind occur. Since I have the die(print_r($_SERVER)); in the php, I get the $_SERVER dump using the chrome inspector, it does not contain HTTP_X_FILENAME index.

我的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的情况如下：

The js is as follows:

//拖放照片上传     （函数（）{

//Drag and drop photo upload (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();
    }


})();

感谢你在前进。