[JS][Angular] 使用按钮触发档案上传

在做档案上传时，想把很丑的 <input type="file"> 换成漂亮的按钮。

做法:
先将 input file 隐藏，
接着新增一个 button，利用 button 的 onclick 事件来开启档案选取视窗。

程式码:

Javascript 写法

<form id="form1" runat="server">    <div>        <input id="file" type="file" onchange="upload(this)" style="display: none" />        <button type="button" onclick="file.click()">档案上传</button>    </div></form><script>    function upload(e) {        var file = e.files[0];        if (!file) {            return;        }        //档案上传        //...        //档案上传        //上传后将档案清除        e.value = '';    }</script>

AngularJS 写法

<form id="form1" runat="server">    <div>        <input id="file" type="file" onchange="angular.element(this).scope().upload(this)" style="display: none" />        <button type="button" onclick="file.click()">档案上传</button>    </div></form><script>    //Controller 内    $scope.upload = function(e) {        var file = e.files[0];        if (!file) {            return;        }        //档案上传        //...        //档案上传        //上传后将档案清除        e.value = '';    }</script>

Angular 写法

<form id="form1" runat="server">    <div>        <input id="file" type="file" (change)="upload($event)" style="display: none" />        <button type="button" onclick="file.click()">档案上传</button>    </div></form><script>    //Component 内    upload($event) {        const file = $event.target.files[0];        if (!file) {            return;        }                //档案上传        //...        //档案上传        //上传后将档案清除        $event.target.value = '';    }</script>