Question

我希望使用angular进行多次上传的代码。在此任务上传文件前显示名称和大小。（没有任何插件）。该代码也适用于ie9。

Answer 1

JS：

var app = angular.module('fileApp',[]);

app.controller('fileCtrl',['$scope', function ($scope) {
$scope.detail = false;

var dropArea = document.getElementById("dropbox");

// initializing  event handlers
dropArea.addEventListener("dragenter", function (evt) {
    evt.stopPropagation();
    evt.preventDefault();
}, false);
dropArea.addEventListener("dragleave", function(){
    evt.stopPropagation();
    evt.preventDefault();
}, false);
dropArea.addEventListener("dragover", function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
}, false);

dropArea.addEventListener("drop", function(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    var files = evt.dataTransfer.files;
    if (files.length > 0) {
        $scope.$apply(function(){
            $scope.files = [];
            for (var i = 0; i < files.length; i++) {
                $scope.files.push(files[i]);
            }
        });
    }
}, false);

//Drag and drop functionality
$scope.setFiles = function(element) {
    $scope.$apply(function($scope) {
        $scope.files = [];
        for (var i = 0; i < element.files.length; i++) {
            $scope.files.push(element.files[i])
        }
        $scope.progressVisible = false
    });
};

//Function to upload file to the server
$scope.uploadFile = function() {
    var formData = new FormData();
    for (var i in $scope.files) {
        formData.append("Files", $scope.files[i]);
    }
    var request = new XMLHttpRequest();
    request.upload.addEventListener("progress", uploadProgress, false);
    request.addEventListener("load", transferComplete, false);
    request.addEventListener("error", transferFailed, false);
    request.addEventListener("abort", transferCanceled, false);
    request.open("POST", "http://localhost:63342/fileupload",true);
    $scope.progressVisible = true;
    request.send(formData);
};

//Function to calculate size of file being uploading
function uploadProgress(evt) {
    $scope.$apply(function(){
        if (evt.lengthComputable) {
            $scope.progress = Math.round(evt.loaded * 100 / evt.total)
        } else {
            $scope.progress = 'unable to compute';
        }
    });
}

//Function to display response from server
function transferComplete(evt) {
    alert(evt.target.responseText)
};

//Function to display response
function transferFailed(evt) {
    alert(" Error in attempting to upload the file.");
};

//Function to display response
function transferCanceled(evt) {
    $scope.$apply(function(){
        $scope.progressVisible = false
    });
    alert("The upload has been canceled by the user.")
}

}]）;

HTML：

<!DOCTYPE html>
<html ng-app="fileApp">
    <head lang="en">
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.min.js"></script>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

        <style type="text/css">
            #dropbox {
                width: 400px;
                height: 200px;
                border: dashed;
                border-radius: 4px;
                background-color: #bbbbbb;
                text-align: center;
                font-size: 40px;
            }
            .myImage {
                float: right;
                height: 40px;
                width: 40px
            }
            .progress-bar {
                width: 300px; height: 14px;
                border-radius: 10px;
                border: 1px solid #CCC;
                background-color: #105cb6;
            }
            .name {
                float: right;
                color: #ffffff
            }
            .uploaded {
                padding: 0;
                height: 14px;
                border-radius: 10px;
                background-color: #00b3ee;
            }

            #dropbox:hover {
                background-color: aquamarine;
            }
            .panel-footer {
                background-color: #000000;
                height: 60px;
            }
        </style>
        <title>File Upload Assignment</title>
    </head>
    <body ng-controller="fileCtrl">
        <div class="container">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <b>Upload Files</b>
                </div>
                <div class="panel-body">
                    <div class="row">
                        <div class="col-md-8">
                            <form action="" method="post" name="fileUploadForm" novalidate="novalidate">
                                <div class="form-group">
                                    <label for="fileToUpload">Select a File to Upload</label><br />
                                    <input type="file" ng-model-instant id="fileToUpload" onchange="angular.element(this).scope().setFiles(this)"/>
                                </div>
                                <div id="dropbox" ng-class="dropClass">
                                    <b>Drop your file here</b>
                                </div>

                                <div ng-show="files.length">
                                    <div ng-repeat="file in files.slice(0)">
                                        <span>{{file.webkitRelativePath || file.name}}</span>
                                        (<span ng-switch="file.size > 1024*1024">
                                    <span ng-switch-when="true">{{file.size / 1024 / 1024 | number:2}} MB</span>
                                    <span ng-switch-default>{{file.size / 1024 | number:2}} kB</span>
                                </span>)
                                    </div>
                                    <input type="submit" class="btn btn-success" ng-click="uploadFile()" value="Upload" />
                                    <input type="button" class="btn btn-primary" ng-click="detail=!detail" value="Preview"/>
                                    <div ng-repeat="file in files" ng-show="detail" class="well well-sm">
                                        <b>
                                            <span>File Name : {{file.name}} </span><br>
                                            <span>File Size : {{file.size}}kb</span><br>
                                            <span>File Type : {{file.type}} </span><br>
                                        </b>
                                    </div>
                                    <div ng-show="progressVisible">
                                        <div class="percent">{{progress}}%</div>
                                        <div class="progress-bar">
                                            <div class="uploaded" ng-style="{'width': progress+'%'}"></div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <div class="col-md-4" style="  font-style: italic;">
                            <b>
                            <p>1.Select one or multiple files from your computer.</p>
                            <p>2.Drag and Drop it inside the browse rectangular area.</p>
                            <p>3.To view the info of uploaded file/files click on preview button.</p>
                            <p>4.Click on upload button to submit the file.</p>
                            </b>
                        </div>
                    </div>
                </div>

                <div class="panel-footer" >
                    <div class="row">
                        <div class="col-md-10" style="color: #ffffff;float: right">
                            <img class="myImage" src="https://lh6.googleusercontent.com/-PFdmm2zza80/VDtlWHc2v-I/AAAAAAAAAIQ/eZY1FQ6TVQk/s132-no/57a8fc23-8b26-42dd-8b8b-fb26f6979a5a">
                            <a style="float:right" href="https://www.linkedin.com/profile/view?id=318059658&trk=nav_responsive_tab_profile_pic">
                                <b class="name">ved Prakash</b>
                                <br>Linkedin
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

没有任何插件的angular js文件上传

1 个答案: