Ajax file upload working only at Opera

Question

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

I have read about 20 discussions and no where find my situation with a answer thats help me. — BASILIO, Jan 25 '13 at 15:18

score 1 · Answer 1 · edited May 23 '17 at 12:12

1

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

edited May 23 '17 at 12:12

Community

1
1

answered Jan 25 '13 at 15:32

Arun P Johny

384,651
66
527
531

score 0 · Answer 2 · answered Jan 25 '13 at 15:32

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.

Ajax file upload working only at Opera

2 Answers2