angular上传文件

1.如果想要修改 ”选则文件“ 输入框的样式，可以通过 ”opacity: 0“ 将它的透明度改为0， html代码如下：

<button  ng-click="importBom()" class="grayColor">
    <span>{{'导入'|translate}}</span>
    <input type="file" id="file" style="width: 75px;height: 46px;position: absolute;top: 10px;margin-left: -6px;opacity: 0;font-size: 0; cursor: pointer;"/>
</button>

效果图如下：

2.js代码：

//导入Bom临时列表
var countImportBom = 0;
$scope.importBom = function() {
    //只能上传一次
    if(!countImportBom){
        countImportBom++;
        //首先监听input框的变动，选中一个新的文件会触发change事件
        document.querySelector("#file").addEventListener("change",function () {
            //获取到选中的文件
            var file = document.querySelector("#file").files[0];
            //创建formdata对象
            var formdata = new FormData();
            formdata.append("file",file);
            //创建xhr，使用ajax进行文件上传
            var xhr = new XMLHttpRequest();
            xhr.open("post","/bomManage/importBomTempList");
            //回调
            xhr.onreadystatechange = function () {
                if (xhr.readyState==4 && xhr.status==200){
                    $scope.getTempDetailList(); //刷新临时列表
                    document.querySelector("#file").value = ""; //上传完毕后清空输入框文件
                }
            };

            //将formdata上传
            xhr.send(formdata);
        });
    }

};