通过WordPress中的jquery ajax跨浏览器文件上传器

Question

i am trying to use jquery.upload v1.0.3 found in: https://github.com/bassjobsen/jqueryupload

below is the js code:

fileChange = function(id,element,pos){
        $(id).upload(baseUrl+'/library/includes/plugins/fileupload/inc/upload.php', function(data) {
            alert(data.filename);
        }, 'json');
    }

below is the php code:

if (move_uploaded_file($_FILES['file']['tmp_name'], '../../../../../../../uploads/'. $_FILES['file']['name'])) {
    $data = array('filename' => $_FILES['file']['name']);
} else {
    $data = array('filename' => 'Failed to save');
}

header('Content-type: text/html');
echo json_encode($data);

the above works great on firefox, google, safari and mobile devices. however it breaks if i try to use it on ie. so far i have tested on ie9 and ie10 and i keep getting the error below:

unable to get value of the property 'filename': object is null or undefined

i am under the impression that this plugin should work on ie6+ but i have no idea, i just need this to work ie8+

i been scratching my head for hours so any help is greatly appreciated.

just an update, my html has input file as hidden via inline style which actions the fileChange function onchange. i also have another visible button which triggers a click event on the input file.

Answer 1

just to confirm, the file uploader found in https://github.com/bassjobsen/jqueryupload does work on ie.

the php code that i posted also works fine.

the javascript code that i posted also works fine.

the problem was, IE < than version 11 does not behave well when you use a separate styled button to open the input file indirectly.

i have fixed the issue by removing the separate styled button and now i am accessing the input file directly. however this means my browse button does not look consistent on all browsers