Question

所以我通过ajax将这个代码用于拖拽和drog文件上传到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();
}


})();

Answer 1

先做几件事......

我的网站托管服务商没有ajax

这没有多大意义。（或任何意义上的确切）。

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

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

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

如果没有ajax，我有什么方法可以做到吗？

<强>的Ajax。

示例：

Answer 2

只有现代浏览器（阅读：任何不是IE的东西）支持AJAX上传的进度条。您还需要在PHP中以不同方式管理文件上载，以实现此目的。

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

有关详细信息，请参阅此AJAX文件上传器：https://github.com/valums/file-uploader

Answer 3

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

如何在没有Ajax的情况下在JavaScript中发布PHP？

3 个答案:

先做几件事......

示例：