Angularjs ng-file-upload上傳檔案
阿新 • • 發佈：2018-12-12
ng-file-upload
angular-file-upload 是一款輕量級的 AngularJS 檔案上傳工具，為不支援瀏覽器的 FileAPI polyfill 設計，使用 HTML5 直接進行檔案上傳。
特性
-
支援上傳進度，在上傳的時候，可以取消或者中止，支援檔案拖拽（HTML5），目錄拖拽（weikit），CORS，
PUT(html5)/POST方法 -
支援使用 Flash polyfill FileAPI 跨瀏覽器上傳 (
HTML5和non-HTML5) 。允許客戶端在上傳之前驗證或者修改檔案。 -
當檔案的內容型別使用
$upload.http()時，支援直接上傳到 CouchDB，imgur 等等。支援 Angular httpPOST/PUT請求的進度事件，更多內容請看 #88(comment) -
Separate shim file loaded on demand for
non-HTML5code meaning no extra load/code if you just need HTML5 support. (Note that html5-shim.js is still needed forprogressevent inHTML5browsers) -
輕量級，使用常規的
$http來上傳（支援非 HTML5 瀏覽器），所以提供所有 Angular$http功能。
一個例子
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>檔案上傳</title>
<meta charset="utf-8" />
<script src="JS/angular.min.js"></script>
<script src="JS/ng-file-upload.min.js"></script>
<script src="JS/ng-file-upload-shim.min.js"></script>
<script>
var app = angular.module('app', ['ngFileUpload']);
app.controller('FileController', function ($scope, Upload) {
$scope.uploadImg = '';
//提交
$scope.submit = function () {
$scope.upload($scope.file);
};
$scope.upload = function (file) {
$scope.fileInfo = file;
Upload.upload({
//服務端接收
url: 'Ashx/UploadFile.ashx',
//上傳的同時帶的引數
data: { 'username': $scope.username },
file: file
}).progress(function (evt) {
//進度條
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progess:' + progressPercentage + '%' + evt.config.file.name);
}).success(function (data, status, headers, config) {
//上傳成功
console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
$scope.uploadImg = data;
}).error(function (data, status, headers, config) {
//上傳失敗
console.log('error status: ' + status);
});
};
});
</script>
</head>
<body>
<form ng-controller="FileController">
<img src="{{uploadImg}}"/>
當前上傳使用者:<input type="text" placeholder="請輸入您的名稱" name="name" ng-model="username"/><div class="button" ngf-select ng-model="file" name="file" ngf-pattern="'image/*" accept="image/*" ngf-max-size="20MB" ngf-min-height="100">Select</div><button type="submit" ng-click="submit()">submit</button> {{fileInfo.name}}<br /> {{fileInfo.size}} </form></body></html>
簡單測試
其中data中存的為我們上傳檔案的同時，需要的引數。
完整的例子，上傳成功並在頁面上進行預覽。
public class UploadFile : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "application/json";
var paras = context.Request.Params["data"];
JObject jobj = JObject.Parse(paras);
string strUserName = jobj["username"].ToString();
HttpFileCollection files = context.Request.Files;
if (files.Count > 0)
{
var file = files[0];
string fileExt = Path.GetExtension(file.FileName);
string fileNewName = Guid.NewGuid() + fileExt;
string strRelativeDir = "/Upload/" + strUserName;
string strDir = context.Request.MapPath(strRelativeDir);
if (!Directory.Exists(strDir))
{
Directory.CreateDirectory(strDir);
}
string strSavePath = Path.Combine(strDir, fileNewName);
file.SaveAs(strSavePath);
context.Response.Write(Path.Combine(strRelativeDir, fileNewName));
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
總結
使用ng-file-upload可以很好的與angularjs結合。在使用的時候，查找了一下angularjs相關的檔案上傳的例子，如果瀏覽器支援html5，那也可以很方便的製作進度條，另外該元件也支援多檔案上傳。推薦給大家。
- 部落格地址：http://www.cnblogs.com/wolf-sun/ 部落格版權:如果文中有不妥或者錯誤的地方還望高手的你指出，以免誤人子弟。如果覺得本文對你有所幫助不如【推薦】一下！如果你有更好的建議，不如留言一起討論，共同進步！ 再次感謝您耐心的讀完本篇文章。