php - 如何在没有 Ajax 的情况下用 JavaScript 发布到 PHP？

Question

所以我已经有了通过ajax将拖放文件上传到PHP的代码，但显然我的网络主机没有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();
}


})();

Answer 1

首先有几件事......

<小时/>

my web host doesn't have ajax

这没有多大意义。 (或者准确地说任何意义)。

Ajax 只是您为了与服务器通信而实现的东西(用 Javascript)。 (与访问服务器上的 php 脚本的方式相同；Ajax 使您能够在后台“获取”它，而无需重新加载页面或重定向到那里)。

所以，简而言之:它与服务器/主机本身无关。

引用: http://en.wikipedia.org/wiki/Ajax_(programming )

Is there any way I can do it without ajax?

Ajax 。

<小时/>

示例:

<小时/>

• jQuery Ajax
• The Ultimate Ajax Object