通过动态输入元素上传图像在 iOS 上不起作用

Question

我正在开发一个应用程序，用户可以在其中将图片上传到他们的个人资料。

当从子元素触发事件时，将调用以下函数。它动态创建一个输入元素，以便用户可以 select 上传文件。

            _changeImage: function () {
                var input = document.createElement('input');
                input.type = 'file';
                input.accept = 'image/*';
                input.addEventListener('change', this._imgChanged.bind(this));
                input.click();
            },

它适用于浏览器和 android 平台，但在 iOS 上失败。

任何人都可以指出可能导致此问题的原因以及我该如何处理吗？

Answer 1

此问题似乎与 iOS 中的一项安全措施有关。文件输入必须由用户手动单击，而不是以编程方式完成。

为了解决这个问题，我们在目标元素上覆盖了一个不可见的输入元素。

<input id="inputpic" type="file" accept="image/*" on-change="someFunction">

*请记住，on-change 是特定于聚合物的，因此您可能需要使用 onChange

然后我们将其设置为 css 使其不透明度为 0。

       #inputpic {
            opacity: 0;
            position: absolute;
            top: [position_of_target_element];
            left: [position_of_target_element];
            width: [width_of_target_element]px;
            height: [width_of_target_element]px;
            z-index: 10;
        }

我对这个解决方法不是特别满意，但我尝试了其他几个建议的解决方案（下面的link）并发现：

使用 'hidden' 属性而不是 css 不透明度不起作用。

将输入元素包装在标签元素中不起作用。

更多信息in this thread。

如果其他人有更好的解决方案，我很乐意听到。谢谢！

通过动态输入元素上传图像在 iOS 上不起作用

Uploading images via dynamic input element not working on iOS

ios

cordova

polymer-1.0