zoukankan      html  css  js  c++  java
  • AngularJs 文件上传(实现Multipart/form-data 文件的上传)

    <!-- 上传yml文件 -->
    <div class="blackBoard" ng-show="vm.showUpop==true"></div>
    <div class="updaYMLpop" ng-show="vm.showUpop==true">
        <div class="title">新建服务容器<span ng-click="vm.showUpop=false">×</span></div>
        <ul>
            <li>选择节点:<select ng-model="nodeInf" ng-options="n.addr for n in vm.nodeInf" ng-change="vm.nodeSele=nodeInf">
            </select></li>
            <li>指定路径:<input type="text" placeholder="请输入路径信息" class="ymLJ"></li>
            <li>选择文件:<a href="javascript:;" class="file">文件
            <input type="file" name="" id="" onchange="angular.element(this).scope().uploadDoc(this.files)">
            </a></li>
        </ul>
        <div class="upbtn">
            <button ng-click="vm.showUpop=false">取消</button>
            <button class="upymBtn">添加</button>
        </div>
    </div>
    控制器:
    // 上传yml文件
            $scope.uploadDoc = function (files) {
                var fileLength = files[0].name.length;
                var subName = files[0].name.slice(fileLength-4,fileLength);
                if(subName!='.yml'){
                    alert("请上传yml格式文件");
                } else{
                    var oFReader = new FileReader();
                    var form = new FormData();
                    var file = files[0];
                    form.append('file', file);
    
                    var setData = {};
                    setData.node = Base64.encode(vm.nodeSele.addr);
                    setData.path = $(".updaYMLpop .ymLJ").val();
                    setData.file = file;
                    $(".updaYMLpop .file").text(files[0].name);
                    $(".upymBtn").bind("click",function(){
                        console.log(setData);
                        ContainerService.updateYml(setData,form)
                        .then(function(data) {
                            console.log(data);
                            // vm.refresh();
                        }, function(data) {
                            // console.log(data);
                            vm.error = data.data;
                        });
                        vm.showUpop=false;
                    })
                }
            }
    updateYml: function(setData,fileOb) {
        var promise = $http.post('/api/containers/ymldeploy?path='+setData.path+'&nodeaddr='+setData.node, fileOb, {
                        withCredentials: true,
                        headers: {'Content-Type': undefined },
                        transformRequest: angular.identity})
                    .then(function(response) {
                        console.log(response);
                        // return response.data;
                        return response;
                    });
                    return promise;
                },    

    代码略粗糙,标红处比较要紧。

  • 相关阅读:
    html语法
    mysql常见的使用语法
    文件相关命令
    linux文件管理
    mysql常见名词解释
    MySQL初识
    文件管理
    并发基础知识3
    Bash shell初识
    【Spring Boot】ActiveMQ 发布/订阅消息模式介绍
  • 原文地址:https://www.cnblogs.com/xulei1992/p/9923678.html
Copyright © 2011-2022 走看看