IE10 отправляет объект FormData через ajax с помощью дисплея: none file-input

Question

У меня возникли проблемы при отправке формы, включая отображение: none file-input через ajax. В Chrome (46.0.2490.71) он отлично работает, но в IE10 (10.0.9200.17492). До сих пор мне не удавалось решить эти проблемы, и важно, чтобы загрузка также работала в IE10.

У меня есть форма с несколькими элементами ввода. Один из них - входной файл. Я имитации входного файла нажмите с помощью JQuery:

$('.file-upload span').click(function() { 
 
     $(this).parent().find('input[type=file]').click(); 
 
});

<div class="col-xs-8 col-sm-7 col-md-4 col-lg-4 input-group file-upload" data-field-name="FILENAME"> 
 
     <input type="file" name="p_doc" class="form-control" placeholder="" maxlength="2000" id="FILENAME"> 
 
     
 
     <input type="text" class="form-control hidden" value="" readonly=""> 
 
     
 
     <span class="input-group-addon" title="Search for file..."> 
 
     <span class="glyphicon glyphicon-folder-open"></span> &nbsp;Browse 
 
     </span> 
 
     <input type="hidden" name="p_arg_values" value=""> 
 
</div>

Я попробовал несколько вариантов, как вы можете увидеть ниже. Я искал решения в Интернете, но не могу найти ничего, что разрешит мои проблемы. Я знаю, что в IE10 поддерживается formData.

formData = new FormData(); 
 
var inputFiles = $('#FILENAME').get(0); 
 
formData.append('p_doc', inputFiles.files[0]); 
 

 
$('form input[type!=hidden][name=p_arg_values]').each(function() { 
 
    formData.append($(this).attr('name'), $(this).val()); 
 
});

formData = new FormData(); 
 
formData.append('p_doc', $('form input[type=file]')[0].files[0]); 
 

 
$('form input[type!=hidden][name=p_arg_values]').each(function() { 
 
    formData.append($(this).attr('name'), $(this).val()); 
 
});

Это работает, если я не установлен дисплей: нет на входной-файл и нам входной-файл непосредственно со следующим код. Но если файл ввода скрыт, я получаю сообщение об ошибке «SCRIPT5: Access is denied».

formElement = document.querySelector("form"); 
 
formData = new FormData(formElement);

После того, как объект FormData был построен, он будет отправлен через AJAX к процедуре оракула.

$.ajax([ORACLE_PROCEDURE], { 
 
     processData: false, 
 
     contentType: false, 
 
     data: formData, 
 
     method: 'POST' 
 
})

Может кто-нибудь поможет решить это?

Answer 1

IE имеет строгую политику безопасности против манипуляции файловыми входами (getting access is denied error on IE8).
Что вы можете сделать, это сделать непрозрачность входного файла 1% и поместить его над кнопкой. Пользователь будет думать, что они нажимают кнопку, но на самом деле это файл, который нажата.