多文件上传前端


 <!--系统主页-->
<!DOCTYPE html>
<!--HTML标签的lang属性:用于指定网页的自然语言-->
<html lang="zh-cn" ng-app="papp" ng-controller="pCtrl">

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        
        <!--css文件引入--start-->
        <link href="css/bootstrap.css" rel="stylesheet" />                
        <link href="css/simple-line-icons.css" rel="stylesheet" />
        <link href="css/font-awesome.min.css" rel="stylesheet" />
        <!--css文件引入--end-->
        
        <!--自定义css文件引入--start-->
        <link href="css/custom/synwork.css" rel="stylesheet" />
        <link href="css/custom/app.css" rel="stylesheet" />
        <!--自定义css文件引入--end-->
            
        <!--js文件引入--start-->
        <script src="js/default/angular1.5.min.js" type="text/javascript"></script>
        <script src="js/default/jquery.min.js" type="text/javascript"></script>
        <script src="js/default/jquery.autocompleter.js" type="text/javascript"></script>    
        
        <script src="js/default/bootstrap.js" type="text/javascript"></script>
        <script src="js/layer/layer.js"></script>
        <!--js文件引入--end-->
        
       

    <body>        
            
        <div>
            <!--文件上传--start-->
            <div class="form-group row">
                <label class="col-lg-1 control-label">照&nbsp; &nbsp;片:</label>
                <div class="col-lg-1">
                    <a href='javascript:void(0);' class="file">添加附件
                        <input type="file" class="file" multiple="multiple" name="files" id="fileInput" onchange='angular.element(this).scope().fileChanged(this)'>
                    </a>                    
                </div>
                
                <div class="col-lg-1">
                    <a href="javascript:;" class="file" ng-click="qinkong()">取消附件</a>
                </div>
                
            </div>
            <!--文件上传--end-->
            
            
            <br>
            <!--显示文件名--start-->
            <div class="form-group row">
                <label class="col-lg-1 control-label">文件名:</label>
                <div class="col-lg-4">
                    <table>
                        <tr ng-repeat="it in names" style="height: 10px;">
                            <td>{{it.name}}</td>            
                              <td>&nbsp;&nbsp;<a ng-click="delFile(it,$index)"><i class="fa fa-window-close"></i></a></td>
                        </tr>
                    </table>
                </div>
            </div>    
            <!--显示文件名--end-->
            
            <div class="form-group row">
                <label class="col-lg-1 control-label">视&nbsp; &nbsp;频:</label>
                <div class="col-lg-1">
                    <a href='javascript:void(0);' class="file">添加附件
                        <input type="file" class="file" multiple="multiple" name="files2" id="fileInput" onchange='angular.element(this).scope().fileChanged2(this)'>
                    </a>                    
                </div>
                <div class="col-lg-1">
                    <a href="javascript:;" class="file" ng-click="qinkong2()">取消附件</a>
                </div>
                
            </div>
            
            <div class="form-group row">
                <label class="col-lg-1 control-label">文件名:</label>
                <div class="col-lg-4">
                    <table>
                        <tr ng-repeat="it in names2" style="height: 10px;">
                            <td>{{it.name}}</td>            
                              <td>&nbsp;&nbsp;<a ng-click="delFile2(it,$index)"><i class="fa fa-window-close"></i></a></td>
                        </tr>
                    </table>
                </div>
            </div>    
            
        </div>
        
        <a class="btn btn-success" ng-click="add()">上传</a>
        
        
    </body>
    <script>
        var app = angular.module('papp', []);
        app.controller('pCtrl',function($scope, $http, $rootScope, $window) {
            
            //定义空数组,存放要上传的文件名
            $scope.names = new Array();
            $scope.names2 = new Array();
            
            //定义空数组,存放要上传的文件
            var fd = new FormData();
            
            //定义空数组,存放要上传的文件,作为间接变量
            var fd1=new FormData();            
            var fd2=new FormData();
            
            //文件数量
            $scope.amount=0;
            $scope.amount2=0;
            
            //文件key值,文件名id
            $scope.index=0;
            $scope.index2=0;
            
            /*
             * 添加附件--start
             */
            $scope.fileChanged = function(ele){   
                //获取选择的所有文件
                var files = document.querySelector('input[name="files"]').files;
                for (var i=0; i<files.length; i++) {
                    //追加文件
                    fd1.append($scope.index, files[i]);    
                    //追加文件名
                    $scope.names.push({id:$scope.index, name: files[i].name});
                    //文件数量加1
                    $scope.amount=$scope.amount+1;
                    //key值加1
                    $scope.index=$scope.index+1
                  }  
                //传播model变化
                $scope.$apply(); 
            }
            $scope.fileChanged2 = function(ele){   
                //获取选择的所有文件
                var files2 = document.querySelector('input[name="files2"]').files;
                for (var i=0; i<files2.length; i++) {
                    //追加文件
                    fd2.append($scope.index2, files2[i]);    
                    //console.log(fd.get('0'))
                    //追加文件名
                    $scope.names2.push({id:$scope.index2, name: files2[i].name});
                    //文件数量加1
                    $scope.amount2=$scope.amount+1;
                    //key值加1
                    $scope.index2=$scope.index+1
                  }  
                //传播model变化
                $scope.$apply(); 
            }
            /*添加附件--end*/
            
        /*
         * 删除单个附件--start
         * 参数index:文件名索引
         * 参数t:文件名对象
         */
        $scope.delFile = function(t,index){             
            //删除当前文件
            fd1.delete(t.id);            
            //删除当前文件名
            $scope.names.splice(index,1);
            //文件数量减1
            $scope.amount=$scope.amount-1;                        
        }
        $scope.delFile2 = function(t,index){             
            //删除当前文件
            fd2.delete(t.id);            
            //删除当前文件名
            $scope.names2.splice(index,1);
            //文件数量减1
            $scope.amount2=$scope.amount-1;                        
        }
        /*删除单个附件--end*/
            
        /*
         * 添加函数--start
         * 上传数据,传入后台
         */
        $scope.add = function(){    
            
            //遍历取出剩下的未删除的文件,添加到fd
            for(var i=0;i<$scope.names.length;i++){
                $scope.id=$scope.names[i].id;
                fd.append('files',fd1.get($scope.id));
                console.log(fd.get('files'))
            }
            for(var i=0;i<$scope.names2.length;i++){
                $scope.id=$scope.names2[i].id;
                fd.append('files2',fd2.get($scope.id));
                console.log(fd.get('files2'))
            }                        
            
            //往后台传递添加的数据
            $http({
                method:'POST',
                url  : 'http://192.168.100.121:8080/asset/addRepository',
                data: fd,  //文件
                headers: {'Content-Type':undefined},
                transformRequest: angular.identity
            }).success(function (response) {
                //上传成功,提示信息,然后跳转到record.html页面
                layer.msg('上传成功', {
                    time: 1000, 
                    icon: 1
                });    
                fd = new FormData();

            }).error(function () {

                //上传失败,提示信息
                layer.msg('上传失败', {
                    time: 1000, 
                    icon: 2
                });    
               });
        };    
        /*添加函数--end*/
        
        /*
         * 清空文件--start
         */
        $scope.qinkong = function() {
                $scope.names=[];
                $scope.amount=0;
                fd1=new FormData();
                var file = document.getElementById("fileInput");
                if (file.outerHTML) {
                    file.outerHTML = file.outerHTML;
                } else {
                    file.value = "";
                    
                }
        };
        
        $scope.qinkong2 = function() {
                $scope.names2=[];
                $scope.amount2=0;
                fd2=new FormData();
                var file = document.getElementById("fileInput");
                if (file.outerHTML) {
                    file.outerHTML = file.outerHTML;
                } else {
                    file.value = "";
                    
                }
        };
        /*清空文件--end*/
    });
    </script>
</html>

猜你喜欢

转载自blog.csdn.net/qq_41471077/article/details/84336116
0条评论
添加一条新回复