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代码在按钮点击时触发input元素的click事件。

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

    }

它在Android和iphone6上工作正常但在iphone5上却没有。任何帮助将不胜感激

Answer 1

请尝试此解决方案。

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 */
}

Answer 2

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

<强> 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中有一个未解决的问题，请点击此链接以获取更多信息

ngf-select无法在iphone5上运行

2 个答案: