How do you post to PHP in JavaScript without Ajax? - Stack Overflow|江阴雨辰互联

So I've got this code for a drag and drog file uploader to PHP via ajax, but apparently my web host doesn't have ajax. Is there any way I can do it without ajax? Specifically I am referring to the UploadFile function, towards the end, after the progress bar parts (which don't seem to work either... )

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


})();

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


})();

Share Improve this question edited May 17, 2017 at 11:00 cweiske 31.2k15 gold badges147 silver badges205 bronze badges asked May 1, 2012 at 19:54 Xavier 3,51327 silver badges36 bronze badges

5 AJAX is implemented by you, not supported by your host. If you've got PHP and JavaScript - and you do - you've got all the tools you need. You probably have an error in your code. Consider jQuery, it has great tools to make AJAX easier to implement cross-browser. – Surreal Dreams Commented May 1, 2012 at 19:57
As was said above, AJAX is client-side technology. Your server needs to be able to dish out JSON (which it can using PHP, alternatives include ASP, PERL, etc)... The rest is pletely client-side. It simply makes no sense for you to NOT have AJAX, but have PHP. – DanRedux Commented May 1, 2012 at 19:58
1 @DanRedux: It doesn't have to return JSON, it can return whatever. – gen_Eric Commented May 1, 2012 at 19:58
1 What? Other people have been having problems with ajax on 1and1 too. jonswain.wordpress./2007/09/28/ajax-hosting-with-1and1 And the UploadFile function is failing on if (xhr.upload), which leads me to assume that the issue is with XMLHttpRequest – Xavier Commented May 1, 2012 at 20:06
1 @zeiv: If a web host doesn't support XMLHttpRequest, they're a crappy web host. Find a better web host. – gen_Eric Commented May 1, 2012 at 20:07

| Show 5 more ments

3 Answers 3

Sorted by: Reset to default 10

A few things first...

my web host doesn't have ajax

This doesn't make much sense. (or any sense to be precise).

Ajax is just something YOU implement (in Javascript) in order to municate with the server. (The same way you access a php script on a server; Ajax enables you to "fetch" it, in the background, without the need to reload the page, or being re-directed there).

So, in a few words : It has NOTHING to do with the server/host per se.

Reference : http://en.wikipedia/wiki/Ajax_(programming)

Is there any way I can do it without ajax?

Ajax.

Examples :

jQuery Ajax
The Ultimate Ajax Object

Only modern browsers (read: anything that's not IE) support progress bars on AJAX uploads. You also need to manage the uploading of files differently in PHP for this to work.

For example: you need to use fopen("php://input", "r"); instead of $_FILES.

Take a look at this AJAX file uploader for more info: https://github./valums/file-uploader

i will suggest you, use "Iframes" for these kind of situations. i did it 1-2 years ago when we don't want to reload our page for file submission.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745430781a4627379.html

How do you post to PHP in JavaScript without Ajax? - Stack Overflow

3 Answers 3

A few things first...

Examples :

发表回复

评论列表（0条）

联系我们

400-800-8888

How do you post to PHP in JavaScript without Ajax? - Stack Overflow

3 Answers 3

A few things first...

Examples :

相关推荐