angular js文件上传无需任何插件
angular js file upload without any plugin
我想要使用 angular 进行多次上传的代码。在此任务中上传文件之前显示名称和大小。 （没有任何插件）。该代码也适用于 ie9。
Fiddle: http://jsfiddle.net/wrrqx60t/5/
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 进行多次上传的代码。在此任务中上传文件之前显示名称和大小。 （没有任何插件）。该代码也适用于 ie9。
Fiddle: http://jsfiddle.net/wrrqx60t/5/
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>