ngf-select 无法在 iphone5 上工作

Question

这是我的 html

<input id="fileUploaderInput" ng-model="$ctrl.files" ng-change="$ctrl.onSelectFiles()" style="display: none" type="file"
           ngf-select multiple>

<button type="button" class="button shed-btn button-energized" ng-click="$ctrl.onClickBrowse()">Browse</button>

我的js代码在点击按钮时触发输入元素的点击事件。

vm.onClickBrowse = function () {
      document.getElementById('fileUploaderInput').click();

    }

它在 android 和 iphone6 上运行良好，但在 iphone5 上运行不正常。任何帮助将不胜感激

Answer 1

作为解决方法，您可以将输入元素放在按钮的顶部，这样用户实际上会点击触发图像选择器的输入元素。

Html

    <button class="button button-block" 
    ngf-select="onBtnUploadClick( $files, $invalidFiles )" 
    ngf-multiple="true" ngf-max-size="10MB" 
    accept="image/*,application/pdf"> Upload Picture </button>
    <input id="ngf-uploadBtn" style="position:relative;top:-55px;left:0px;
    width:100%;visibility:visible;opacity:0.01" 
    type="file" ngf-select="onBtnUploadClick( $files, $invalidFiles )" 
    ngf-multiple="true" ngf-max-size="10MB" accept="image/*,application/pdf" 
    multiple="multiple">

github 中有一个未解决的问题，请关注 link 以获取更多信息

Answer 2

请尝试此解决方案。

a) 将您的输入包裹在您的按钮中

<button 
    type="button"
    class="button shed-btn button-energized upload-inp-wrapper" 
    ng-click="$ctrl.onClickBrowse()">
    Browse

    <input
        type="file"
        id="fileUploaderInput"
        ng-model="$ctrl.files"
        ng-change="$ctrl.onSelectFiles()"
        ngf-select multiple>
</button>

b) 相应地设置元素样式

.upload-inp-wrapper{
    position: relative;
}

.upload-inp-wrapper input{
    position: absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    opacity: 0;   /* so it doesn't show */
    z-index: 2;   /* or whatever keeps the input above button */
}

ngf-select 无法在 iphone5 上工作

ngf-select is not working on iphone5

iphone

ios

ionic-framework

ng-file-upload