0

したがって、ajax を介して PHP にファイルをドラッグ アンド ドロップするためのこのコードを取得しましたが、どうやら私の Web ホストには ajax がありません。ajaxなしでそれを行う方法はありますか? 具体的には、プログレスバーの部分の後の最後に向かって、UploadFile関数を参照しています（どちらも機能していないようです...）

(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);
    }

}


//upload images
function UploadFile(file) {


    var xhr = new XMLHttpRequest();
    if ( xhr.upload && file.type == "image/jpeg" || file.type == "image/gif" || file.type == "image/jpg" || 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";
        }, true);


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

        //start upload
        xhr.open("POST", $is("upload").action, true);
        xhr.setRequestHeader("X_FILENAME", file.name);
        xhr.setRequestHeader("Content-type", file.type);
        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 = "block";
    }

}

// output file information
function ParseFile(file) {

    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 src="' + e.target.result + '" /></p>'
            );
        }
        reader.readAsDataURL(file);
        $("#fileselect").val(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);
    }

}



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


})();
4

3 に答える 3

10

最初にいくつかのこと...

私のウェブホストには ajax がありません

これはあまり意味がありません。（または正確には任意の意味）。

Ajax は、サーバーと通信するために (Javascript で) 実装するものです。(サーバー上の php スクリプトにアクセスするのと同じ方法です。Ajax を使用すると、ページをリロードしたりリダイレクトしたりすることなく、バックグラウンドでスクリプトを「取得」できます)。

つまり、一言で言えば、サーバー/ホスト自体とは何の関係もありません。

参考： http: //en.wikipedia.org/wiki/Ajax_ (プログラミング)

ajaxなしでそれを行う方法はありますか?

アヤックス。

例:

于 2012-05-01T19:56:51.917 に答える
0

このような状況では「iframe」を使用することをお勧めします。ファイル送信のためにページをリロードしたくないときに、1〜2年前にそれを行いました。

于 2012-05-02T06:30:58.700 に答える
0

AJAX アップロードの進行状況バーをサポートするのは、最新のブラウザー (つまり、IE 以外のもの) のみです。これを機能させるには、PHP でファイルのアップロードを別の方法で管理する必要もあります。

fopen("php://input", "r");例:の代わりに使用する必要があります$_FILES。

詳細については、この AJAX ファイル アップローダーをご覧ください: https://github.com/valums/file-uploader

于 2012-05-01T20:06:11.163 に答える