如何在没有 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

先做几件事...

---

我的虚拟主机没有 ajax

这没有多大意义。 （或任何准确的意思）。

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

因此，简而言之：它与服务器/主机本身无关。

参考： http://en.wikipedia.org/wiki/Ajax_(programming)

没有ajax有什么办法可以做到吗？

Ajax。

---

例子：

---

• jQuery Ajax
• The Ultimate Ajax Object

Answer 2

只有现代浏览器（阅读：任何非 IE）支持 AJAX 上传的进度条。您还需要在 PHP 中以不同的方式管理文件的上传才能使其正常工作。

例如：您需要使用fopen("php://input", "r"); 而不是$_FILES。

查看此 AJAX 文件上传器了解更多信息：https://github.com/valums/file-uploader

Answer 3

我会建议你，在这种情况下使用“Iframes”。我在 1-2 年前就这样做了，当时我们不想重新加载页面以提交文件。