Question

我正在使用angularjs，在我的应用中，我想制作一个自定义file字段。为此，我创建了一个span元素作为按钮，我将file filed作为孩子保留。

当我点击跨度（按钮）时，我收到错误：

Uncaught RangeError: Maximum call stack size exceeded

实际上，我试图在点击我的范围时触发click字段的file事件。

如何解决这个问题？

这是我的HTML :(它有多个瞬间）

<div class="row row3">
    <div class="cell">
        <a ng-href="">Contract Details</a>
        <span class="fileUpload">
            Upload Report 
            <!-- hanlded by directive by class name  -->
            <input 
            info="contractor.Id" 
            upload="uploadFile" 
            class="uploadField upload-file-directive" 
            type="file" />
        </span>
    </div>
</div>

CSS :(远离视觉）

.fileUpload .uploadField

border : 1px solid red;
position : absolute;
left : -200em;

我的指示：

//在此处理文件上传

var uploadFileDirective = function () {

    return {

        replace: false,

        restrict : 'C',

        scope : {

            info:"=",
            upload:"="

        },

        link:function ( scope, element, attrs ) {

            var button = element.parent('.fileUpload'); //selecting parent

            button.on( 'click', function () {

                $(this).children('.uploadField').click(); //triggering

            });

            element.on('change', function ( event ) { //change events

                var files = event.target.files;
                scope.upload(files, scope.info );

            });
        }

    }

}

angular.module("tcpApp")
.directive("uploadFileDirective", uploadFileDirective);

但是我的错误已经超过了。这里有什么问题？任何人都会向我显示制作此自定义file字段的正确方法。

Answer 1

这是我为我的应用程序编写的代码（现在正在制作中，因此已经过测试）。

<div class="file-input-name">{{featuresFile.name || 'NO FILE SELECTED'}}</div>
<label class="md-primary md-raised md-button" md-ink-ripple for="file-input-fts">
    <span>Select</span>
</label>
<input id="file-input-fts" type="file" file-model="featuresFile">
<md-button class="md-raised md-primary" ng-click="upload.uploadCsvFeatures()">UPLOAD</md-button>

在我的应用程序中，我使用Angular Material，所以使用md按钮，但您可以轻松使用普通的html <button>标记。

简而言之，您需要隐藏实际的文件输入并使用标签作为搜索按钮。

css是：

#file-input-fts {
    display: none;
}

以md- *为前缀的类是来自Angular Material的类，仅用于样式目的，您可以使用自己的，也可以使用该库。

'file`输入字段上的自定义按钮抛出错误

1 个答案: