Question

I have some troubles when sending a form including a display:none file-input through ajax. In Chrome (46.0.2490.71) it works fine, but in IE10 (10.0.9200.17492). Until now I was not successful to resolve these troubles and it's important that the upload works in IE10 too.

I have a form with multiple input-elements. One of them is an input-file. I simulate the input-file click using 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>

I've tried several possibilities as you can see below. I've searched for solutions in the internet but can't find anything that resolves my troubles. I know that in IE10 the formData is supported.

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

It's working if I don't set the display:none on the input-file and us the the input-file directly with the following code. But if the input-file is hidden I get the error "SCRIPT5: Access is denied".

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

After the formData object has been built, it will be sent through ajax to an oracle procedure.

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

Can anyone help to resolve this?

Answer 1

IE对操作文件输入（getting access is denied error on IE8）有严格的安全策略你可以做的是使文件的不透明度输入1％并将其放在按钮上。用户会认为他们正在按下按钮，但实际上是正在点击的文件输入。

IE10 send FormData object through ajax using a display:none file-input

1 个答案: