社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
在IE9上进行文件上传主要存在以下问题:
既然使用不了ajax提交,那么只能使用传统表单提交方式。
其实antd的form.create()的结果也是在页面上生成了一个<form>,我们可以直接获取它。
let htmlForm = _this.formArea.getElementsByTagName("form")[0];
获取到这个form对象后,把它改造成传统表单。
htmlForm.setAttribute("method", "post");
htmlForm.setAttribute("enctype", "multipart/form-data");
htmlForm.setAttribute("action", serviceUrl + 'ws/uploadHtml?token=' + loginUser().token);
上面代码指定了表单传递的方法、编码、及后台响应地址。接下来处理我们要传递的值。首先定义了个公用方法,用于添加表单值。
function addInputElement(htmlForm, name, value) {
let input = document.createElement("input");
input.setAttribute("name", name);
input.setAttribute("type", "hidden");
input.setAttribute("value", value);
htmlForm.appendChild(input);
}
添加表单值
addInputElement(htmlForm, 'editableName', values.editableName);
addInputElement(htmlForm, 'ajbs', _this.props.ajbs);
addInputElement(htmlForm, 'fileType1', values.fileType1);
最后我们只要提交表单即可。
htmlForm.submit();
利用html的file标签实现。该组件我已经写成公用组件,"rjd": "0.2.25",可使用此组件在ie9下通过传统模式上传文件,并且通过动态增加表单元素的方式解决了ie9不支持multiple的问题。
把它写在第一步中你的form组件里,即可在表单提交时提交文件。
通过将表单的target指向页面内的iframe,则可以解决页面刷新问题。
如可在自定义表单组件后加一个<iframe>
在第一步骤设置表单属性时增加设置表单target
htmlForm.setAttribute("target", htmlIframe.name);
这样表单提交时就不会刷新整个页面了。
IE9不能识别application/json,那么只能改造后端了,后端返回”text/plain”,前端通过JSON.parse进行解析。
后端代码示例
前端代码解析示例
前端(instrument-componentcomponentswsUploaduploadForm):
后端(court-splc-websrcmainjavacomrjsoftcourtsplcwebcontrollerwsYswsController.java):
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!