IE10 使用 display:none 文件输入通过 ajax 发送 FormData 对象
IE10 send FormData object through ajax using a display:none file-input
我在通过 ajax 发送包含 display:none 文件输入的表单时遇到了一些麻烦。在 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> 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());
});
如果我不在输入文件上设置 display:none 并且直接使用以下代码使用输入文件,它就可以工作。但是如果输入文件被隐藏,我会收到错误 "SCRIPT5: Access is denied".
formElement = document.querySelector("form");
formData = new FormData(formElement);
构建 formData 对象后,它将通过 ajax 发送到 oracle 过程。
$.ajax([ORACLE_PROCEDURE], {
processData: false,
contentType: false,
data: formData,
method: 'POST'
})
谁能帮忙解决这个问题?
IE 有严格的安全策略来防止操纵文件输入 (getting access is denied error on IE8)。
您可以做的是将文件输入的不透明度设置为 1% 并将其放在按钮上。用户会认为他们正在按下按钮,但实际上是正在单击的文件输入。
我在通过 ajax 发送包含 display:none 文件输入的表单时遇到了一些麻烦。在 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> 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());
});
如果我不在输入文件上设置 display:none 并且直接使用以下代码使用输入文件,它就可以工作。但是如果输入文件被隐藏,我会收到错误 "SCRIPT5: Access is denied".
formElement = document.querySelector("form");
formData = new FormData(formElement);
构建 formData 对象后,它将通过 ajax 发送到 oracle 过程。
$.ajax([ORACLE_PROCEDURE], {
processData: false,
contentType: false,
data: formData,
method: 'POST'
})
谁能帮忙解决这个问题?
IE 有严格的安全策略来防止操纵文件输入 (getting access is denied error on IE8)。
您可以做的是将文件输入的不透明度设置为 1% 并将其放在按钮上。用户会认为他们正在按下按钮,但实际上是正在单击的文件输入。