.net版本angular-file-upload
分享一个angular的上传控件，双向绑定。
<html id="ng-app" ng-app="app">
<head>
<title>Simple example</title>
<link href="../MasterPager/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="../MasterPager/js/angular-file-upload/console-sham.js" type="text/javascript"></script>
<script src="../MasterPager/js/angular-file-upload/angular.min.js" type="text/javascript"></script>
<script src="../MasterPager/js/angular-file-upload/angular-file-upload.min.js" type="text/javascript"></script>
<script src="../MasterPager/js/angular-file-upload/controllers.js" type="text/javascript"></script>
<style>
.my-drop-zone
{
border: dotted 3px lightgray;
}
.nv-file-over
{
border: dotted 3px red;
}
/* Default class applied to drop zones on over */.another-file-over-class
{
border: dotted 3px green;
}
</style>
</head>
<body ng-controller="AppController" nv-file-drop="" uploader="uploader" filters="queueLimit, customFilter">
<div class="container">
<div class="row">
<div class="col-md-12" style="margin-bottom: 40px">
<br />
<br />
<input type="button" value="浏览" onclick="uplTheFile.click()" class="btn btn-primary btn-flat">
<input type="text" size="20" name="upfile" id="upfile" style="border: 0px dotted #ccc;
width: 500px">
<input type="file" id="uplTheFile" nv-file-select="" uploader="uploader" multiple
style="display: none" onchange="upfile.value=this.value" />
<button type="button" class="btn btn-success btn-s" ng-click="uploader.uploadAll()"
ng-disabled="!uploader.getNotUploadedItems().length">
<span class="glyphicon glyphicon-upload"></span>Upload all
</button>
<button onclick="upfile.value=''" type="button" class="btn btn-danger btn-s" ng-click="uploader.clearQueue()"
ng-disabled="!uploader.queue.length">
<span class="glyphicon glyphicon-trash"></span>Remove all
</button>
<br />
<%-- <p>
Queue length: {{ uploader.queue.length }}</p>--%>
<table class="table" id="fileUp">
<thead>
<tr>
<th width="50%" style="display:none">
disName
</th>
<th width="50%">
Name
</th>
<th ng-show="uploader.isHTML5">
Size
</th>
<th ng-show="uploader.isHTML5">
Progress
</th>
<th>
Status
</th>
<th>
Actions
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in uploader.queue">
<td style="display:none">
<strong>{{ item.file.disName }}</strong>
</td>
<td>
<strong>{{ item.file.name }}</strong>
</td>
<td ng-show="uploader.isHTML5" nowrap>
{{ item.file.size/1024/1024|number:2 }} MB
</td>
<td ng-show="uploader.isHTML5">
<div class="progress" style="margin-bottom: 0;">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': item.progress + '%' }">
</div>
</div>
</td>
<td class="text-center">
<span ng-show="item.isSuccess"><i class="glyphicon glyphicon-ok"></i></span><span
ng-show="item.isCancel"><i class="glyphicon glyphicon-ban-circle"></i></span>
<span ng-show="item.isError"><i class="glyphicon glyphicon-remove"></i></span>
</td>
<td nowrap>
<button type="button" class="btn btn-success btn-xs" ng-click="item.upload()" ng-disabled="item.isReady || item.isUploading || item.isSuccess">
<span class="glyphicon glyphicon-upload"></span>Upload
</button>
<button type="button" class="btn btn-danger btn-xs" ng-click="item.remove()">
<span class="glyphicon glyphicon-trash"></span>Remove
</button>
</td>
</tr>
</tbody>
</table>
<div>
<input type="hidden" id="posd" runat="server" clientidmode="Static" />
<input type="hidden" id="hidmoduleid" runat="server" clientidmode="Static" />
<%-- <div>
Queue progress:
<div class="progress" style="">
<div class="progress-bar" role="progressbar" ng-style="{ 'width': uploader.progress + '%' }">
</div>
</div>
</div>--%>
<div style="display:none">
<input type="button" id="btnBc" runat="server" onclick="search()" clientidmode="Static" />
</div>
<input type="hidden" id="hdText" runat="server" clientidmode="Static" />
</div>
</div>
</div>
</div>
</body>
</html>
<script>
function search() {
var s3 = document.getElementById("fileUp"); //获取第一个表格
var addHtml = "";
for (var i = 0; i < s3.rows.length; i++) {
for (var j = 0; j < s3.rows[i].cells.length; j++) {
if (i>0) {
if (j < 3) {
addHtml += s3.rows[i].cells[j].innerText.replace("<strong class=\"ng-binding\">", "").replace("</strong>", "") + ",";
}
}
}
if (i > 0) {
addHtml = addHtml.substring(0, addHtml.length - 1).replace("\t", "").replace("\n", "");
addHtml += "$";
}
}
$('#hdText').val(addHtml);
}
</script>
controllers.js
'use strict';
angular
.module('app', ['angularFileUpload'])
.controller('AppController', ['$scope', 'FileUploader', function ($scope, FileUploader) {
var a = $("#posd").val();
var module = $("#hidmoduleid").val();
// var s3 = document.getElementById("fileUp"); //获取第一个表格
var uploader = $scope.uploader = new FileUploader({
url: '../UserControl/UploadHandler.ashx?Module=' + a + '&moduleid=' + module + '&ActionType=select',
// formData: [{ component: FileUploader.disName}]
});
// FILTERS
uploader.filters.push({
name: 'extensionFilter',
fn: function (item, options) {
var filename = item.name;
var s3 = document.getElementById("fileUp"); //获取第一个表格
var addHtml = "";
if (s3.rows.length == 1) {
return true;
} else {
for (var i = 0; i < s3.rows.length; i++) {
if (i > 0) {
for (var j = 0; j < s3.rows[i].cells.length; j++) {
if (j == 1) {
addHtml = s3.rows[i].cells[j].innerText.replace("<strong class=\"ng-binding\">", "").replace("</strong>", "");
if (filename == addHtml.replace("\t", "").replace("\n", "")) {
alert('上传附件重复.');
return false;
} else {
return true;
}
}
}
}
}
}
}
});
uploader.filters.push({
name: 'sizeFilter',
fn: function (item, options) {
var fileSize = item.size;
fileSize = parseInt(fileSize) / (1024 * 1024);
if (fileSize <= 500)
return true;
else {
alert('请您选择小于500M的附件进行上传.');
return false;
}
}
});
uploader.filters.push({
name: 'itemResetFilter',
fn: function (item, options) {
if (this.queue.length < 10)
return true;
else {
alert('最多支持您上传10个附件.');
return false;
}
}
});
// CALLBACKS
uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
console.info('onWhenAddingFileFailed', item, filter, options);
};
uploader.onAfterAddingFile = function (fileItem) {
console.info('onAfterAddingFile', fileItem);
};
uploader.onAfterAddingAll = function (addedFileItems) {
console.info('onAfterAddingAll', addedFileItems);
};
uploader.onBeforeUploadItem = function (item) {
console.info('onBeforeUploadItem', item);
};
uploader.onProgressItem = function (fileItem, progress) {
console.info('onProgressItem', fileItem, progress);
};
uploader.onProgressAll = function (progress) {
console.info('onProgressAll', progress);
};
uploader.onSuccessItem = function (fileItem, response, status, headers) {
console.info('onSuccessItem', fileItem, response, status, headers);
};
uploader.onErrorItem = function (fileItem, response, status, headers) {
console.info('onErrorItem', fileItem, response, status, headers);
};
uploader.onCancelItem = function (fileItem, response, status, headers) {
console.info('onCancelItem', fileItem, response, status, headers);
};
uploader.onCompleteItem = function (fileItem, response, status, headers) {
console.info('onCompleteItem', fileItem, response, status, headers);
};
uploader.onCompleteAll = function () {
console.info('onCompleteAll');
};
console.info('uploader', uploader);
uploader.onSuccessItem = function (fileItem, response, status, headers) {
response = response.split('$');
var addHtml = '';
for (var i = 0; i < s3.rows.length; i++) {
if (i > 0) {
for (var j = 0; j < s3.rows[i].cells.length; j++) {
if (j == 1) {
addHtml = s3.rows[i].cells[j].innerText.replace("<strong class=\"ng-binding\">", "").replace("</strong>", "");
if (response[1] == addHtml.replace("\t", "").replace("\n", "")) {
//根据上传附件名称，将上传后生成的唯一ID重新赋值到页面上，点击保存按钮时，进行保存入库。
//根据上传附件名称，将上传后生成的唯一ID重新赋值到页面上，点击保存按钮时，进行保存入库。
s3.rows[i].cells[0].innerText = response[0];
}
}
}
}
}
};
} ]);
一般处理程序
C# 后台保存方法
一般处理程序
public void ProcessRequest(HttpContext context)
{
if (context.Request.Files.Count > 0)
{
HttpFileCollection files = context.Request.Files;
var userName = context.Request.Form["name"];
for (int i = 0; i < files.Count; i++)
{
HttpPostedFile file = files[i];
string fname = context.Server.MapPath("Uploads\\" + userName.ToUpper() + "\\" + file.FileName);
file.SaveAs(fname);
}
}
context.Response.ContentType = "text/plain";
context.Response.Write("File/s uploaded successfully!");
}C# 后台保存方法
public void SaveFile()
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>search();</script>");
string fileText = this.hdText.Value;
string[] fileArr = fileText.Split('$');
foreach (var item in fileArr)
{
if (!string.IsNullOrEmpty(item))
{
string[] filetext = item.Split(',');
if (filetext.Length==3)
{
if (filetext[0].Substring(0,2)=="20")
{
InsertAttachment(filetext[0], ModuleID, InfoID, filetext[1], "", DateTime.Now, ((PageBase)Page).CurrentUser.EmployeeID, 0, filetext[1], Path.GetExtension(filetext[1]),filetext[2].ToString().Replace("MB", "") );
}
}
}
}
}
