Question

我目前有以下html，其中包含3个按钮（1个隐藏）。我有一个触发隐藏按钮的按钮，用于选择要上传的文件，我有第三个按钮，用于调用上传并将数据发送到服务器。我想改变它，以便在选择文件后，文件会自动上传。我在选择文件时触发上传按钮时遇到问题（然后我会在自动上传功能工作后隐藏上传按钮）。我已经尝试使用onchange事件来完成此任务但没有成功

<div class="col-xs-12" style="margin-top:250px">
        <div class="col-xs-4" align="center" style="padding-left:290px">
            <button class="btn btn-default" ng-click="newProject()">New Project</button>
        </div>
        <form class="col-xs-4" align="center"
            ng-controller="CsvImportController" style="display: inline-block;padding-left:200px" id="csvForm">
            <a href="#" class="btn btn-default btn-file"
                onclick="document.getElementById('fileBrowser').click(); return false;">Select
                CSV File</a>
            <button id="submitCsv" class="btn btn-default" ng-click="upload()">Upload</button>
        </form>
        <div class="col-xs-4" align="center" style="padding-left:110px">
            <a class="btn btn-default">Browse
                Projects</a>
        </div>
    </div>
    <br>
    <br>
    <input id="fileBrowser" style="visibility: hidden;"
        class="btn btn-default btn-file" type="file" id="file" file-input="files" onchange="document.getElementById('submitCsv').click(); return false;"/>

Answer 1

See this answer用于某些库，它们将为您处理所有上传功能，并提供一些其他不错的功能。

onchange无法在<input type="file"/>上运行，因为在您选择文件时它不会注册更改。 ng-click也不起作用，因为它会在首次点击input时触发，而不是在选择文件时触发。

你也不能将任何样式应用于<input type="file" />，所以我得到了你在这里尝试做的事情，但是<input type="file" />并没有提供很多真正的功能不幸的。

您还在隐藏的输入上定义了2个ID。确保只有一个id，以便您可以正确调用它。

角度强制点击

1 个答案: