The goal is to submit the file with a Web API ajax request using javascript / jquery in IE 8-9 browser. FileAPI is connected to the page , FormData () is emulated for browsers that do not support them, and for all this to work on html5, html5shiv is also connected.

The working code for Google Chrome and IE> 10 is as follows:

function upload_scan(address, id) { var input = document.getElementById(address); var file = FileAPI.getFiles(input); var temp = new FormData(); temp.append('picture', file[0]); if (id == undefined) id = ''; else id = '/' + id; $.ajax({ url: string_connection + 'uploadfile' + id, type: "POST", data: temp, processData: false, contentType: false, success: function(data) { //Код при выполнении }, error: function(x, y, z) { alert('Не получилось загрузить скан\n' + x + '\n' + y + '\n' + z); } }); 
 <pre> <form name="scan" enctype="multipart/form-data" method="post" action=""> <input type="file" id="scan_file" class="btn" accept="image/*"> <input id="button_for_scan" type="button" value="Загрузить" onclick="upload_scan('scan_file');"> </form> </pre>

The problem is that the FileAPI.getFiles () method in IE 8-9 browsers does not take a file, but an empty blob . There is a suggestion how to do it all right?

    1 answer 1

    1. clone file <input>
    2. unplug the old <input> (which is with the file)
    3. add a new <input> to the old one
    4. append the old <input> to the auxiliary form
    5. configure for the target helper form to point to the hidden <iframe>
    6. submit form

    Here you can see the finished implementation: https://github.com/blueimp/jQuery-File-Upload/blob/master/js/jquery.iframe-transport.js#L53