Question

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

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

            _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;
        }

我对此解决方案并不特别满意，但是我尝试了其他提议的解决方案（下面的链接），发现：

使用“隐藏”属性代替CSS的不透明度不起作用。

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

更多信息in this thread。

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

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

1 个答案: