CODEWITHSUNDEEP
phpjavascriptajaxfile-upload
BASILIO
BASILIO

Reputation: 887

Ajax file upload working only at Opera

I try to upload photo with Ajax, have written code that has worked without Problems in Opera (My Standard Browser). Now i have tested it in other browsers, they all shooting with errors back. My PHP script starts with

if(!empty($_FILES)) {
    //todo
} else {
    exit();
}

So i tried to put var_dump($_FILES); die(); at the start to see whats wrong. They all give this back array(0) {}. I have tested it on FireFox, Chrome, Safari (All latest version), IE9 on win7 and latest Firefox on Debian. The biggest problem, i don't understand why it don't working, because in developer tools and all browsers above, i can see the file with right name in right position.

Here is my JS to upload:

var photo_input1 = document.createElement('input');

photo_input1.setAttribute('type','file');
photo_input1.setAttribute('class','photo_input');
photo_input1.setAttribute('id','photo1');
photo_input1.addEventListener('change', function() {
    upload_photo(this.id,this.files[0])
});

var upload_photo = function(filename,file) {
    var data_arr = Array();
    data_arr['callback_name'] = 'upload_photo';
    upload_file(filename,file,'add_photo.php',data_arr);
}

var upload_file = function(filename,file,url,data_arr) {
    var datapack = null;
    var ajaxanswer = function() {
        try {
            if (ajax.readyState == 4) {
                if (ajax.status == 200) {
                    //todo
                } else {
                    alert('Problems:' + "\n" + ajax.statusText);
                }
            }
        } catch(e) {
        }
    }

    try {
        var ajax = new XMLHttpRequest();
    } catch(e) {
        try {
            var ajax = new ActiveXObject("Msxml2.XMLHTTP");
        } catch(e) {
            try {
                var ajax = new ActiveXObject("Microsoft.XMLHTTP");
            } catch(e) {
                return false;
            }
        }
    }

    if(ajax) {
        if(typeof url != 'undefined') {
            datapack = new FormData;
            datapack.append(filename,file);
            if(typeof data_arr != 'undefined') {
                for(key in data_arr) {
                    datapack.append(key, data_arr[key]);
                }
            }
            ajax.open('POST',url, true);
            ajax.setRequestHeader('Content-type', 'multipart/form-data');
            ajax.onreadystatechange = ajaxanswer;
            ajax.send(datapack);
        }
    }
}

Upvotes: 0

Views: 533

Answers (2)

Lim H.
Lim H.

Reputation: 10050

FormData only works in Opera v12 and up as other relatively new browsers: http://caniuse.com/#search=FormData

You can try this for Ajax-like file uploading : https://github.com/valums/file-uploader. As Arun P Johny mentioned, there is no uploading with Ajax, but you can use some workarounds, like hidden iframe in this case.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

It is not possible to upload files using ajax. The normal way to do is to use a iframe internal and submit the form using the iframe. You can read about one of the way here.

Also you can read this answer.

With XHR2, File upload through AJAX is supported. E.g. through FormData object, but unfortunately it is not supported by all/old browsers

Upvotes: 1

Related Questions