钉钉安卓h5 上传图片文件名转义无法触发 onChange 事件
问题
文件名包含转义字符，不触发 input 标签的 onChange 事件
希望修复，在浏览器中测试正常
环境
钉钉安卓版本： 7.1.15
Mozilla/5.0 (Linux; U; Android 12; zh-CN; V2166BA Build/SP1A.210812.003) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/100.0.4896.58 UWS/5.6.0.9 Mobile Safari/537.36 AliApp(DingTalk/7.1.15) com.alibaba.android.rimet/33611078 Channel/10003993 language/zh-CN abi/64 xpn/vivo UT4Aplus/0.2.25 colorScheme/dark
操作步骤
1.上传的图片命名为 test%2ftest.jpg
2.在钉钉中 打开调试 index.html
3.上传图片，不触发 input 标签的 onChange 事件
使用以下代码index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/eruda/3.0.1/eruda.js"></script>
<script>
eruda.init()
</script>
</head>
<body>
<input onChange="onChange()" type="file" accept="image/*" multiple />
<script>
function onChange(e) {
alert('onChange')
}
</script>
</body>
</html>
展开
收起
1
条回答
写回答
写回答
-
这个问题可能是由于钉钉安卓版本的内置浏览器对于文件名包含转义字符的处理存在一些兼容性问题。以下是一些可能的解决方法：
- 使用
onInput事件替代onChange事件：
尝试替换onChange事件为onInput事件，看看是否能够正常触发。
<input onInput="onChange()" type="file" accept="image/*" multiple />- 使用
webkitEntries获取文件信息：
钉钉内置浏览器可能不支持某些标准的文件API，可以尝试使用webkitEntries来获取文件信息。
<input id="fileInput" onChange="onChange()" type="file" accept="image/*" multiple /> <script> function onChange(e) { const input = document.getElementById('fileInput'); const files = Array.from(input.files || []); const entries = input.webkitEntries || []; for (let i = 0; i < entries.length; i++) { const entry = entries[i]; if (entry.isFile) { entry.file(file => { alert('onChange'); }); } } for (let i = 0; i < files.length; i++) { alert('onChange'); } } </script>- 使用第三方库如
dropzone.js或uppy.js：
使用专门处理文件上传的第三方库可能会有更好的兼容性和稳定性。这些库通常已经处理了各种浏览器的兼容性问题。
2023-12-29 16:24:10赞同 展开评论 打赏 - 使用
版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
相关问答
