Safari 10 on Mac does not upload file to XHR

Question

I use XHR to upload an image to an external server with CORS enabled.

everything works fine in Chrome, Firefox and IE.

But using Safari, the server response with an error like mime. saying the file type is "application / octet-stream", while it should be "image /*'.// p>

After I turned off the mime type check, safari can load the file, but its entire empty file is 0b.

who knows why?

    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://up-z1.qiniu.com/', true);
    var formData;
    formData = new FormData();
    formData.append('key', file.name);
    formData.append('token', acessToken);
    formData.append('file', file);
    xhr.onreadystatechange = function (response) {
        if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
            callback(true,null);
        } else if (xhr.status != 200 && xhr.responseText) {
            callback(false,null);
        }
    };
    xhr.send(formData);

Answer 1

, stackoverflow, , Safari , , file.toBlob(), file.toString(). , blob blob.

var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://up-z1.qiniu.com/', true);
var formData;
formData = new FormData();
formData.append('key', file.name);
formData.append('token', acessToken);
formData.append('file', fileToBlob(file));
xhr.onreadystatechange = function (response) {
    if (xhr.readyState == 4 && xhr.status == 200 && xhr.responseText != "") {
        callback(true,null);
    } else if (xhr.status != 200 && xhr.responseText) {
        callback(false,null);
    }
};
xhr.send(formData);