3

ドラッグ アンド ドロップの画像アップロードを実装しようとしています。オンラインでかなり単純なスクリプトを見つけて、自分の用途に合わせました。私のローカルインストールでは、ファイルは完全に正常にアップロードされますが、サーバーにはアップロードされません。私のデバッグの試みから、 $_SERVER['HTTP_X_FILENAME'] はphpによって設定されることさえありません。

私は次のことを試しました:-アップロードフォルダーが755に設定されていることを確認します-php一時アップロードパスを変更し、最大許容ファイルサイズを増やします

あらゆる種類の php または js エラーは発生しません。私は die(print_r($_SERVER)); を持っているので PHP では、クロム インスペクタを使用して $_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();
    }


})();

前もって感謝します。

4

2 に答える 2

9

あなたはおそらく今あなたの問題を解決しているでしょうが、私はここにこの解決策を投稿して、同じ問題でここに来る他の人を助けます. あなたのjsには、次の行があります

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

しかし読むべき

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

アンダースコアは、Apache の以降のリリースでは非推奨になっているため (「 Header names with underscores ignore in php 5.5.1 / apache 2.4.6 」も参照)

于 2014-06-12T09:58:19.560 に答える
0

Ubuntu WAMP インストールの 1 つでこの問題が発生しました。アップロード URL (Javascript 側で指定された POST URL) は、相対パスではなく完全修飾パスである必要があります。ただし、値はわかりませんが$id("upload").action、コードにあるものの値のようです。Apache ログにアクセスできる場合は、Apache ログを参照することで、これが原因であることを確認できます。ファイルを送信しようとしたときに 404 エラーが表示される場合は、これが問題です。それは、リクエストがサーバーに到達したと仮定した場合です。

于 2012-12-13T03:13:00.090 に答える