github连接地址：https://github.com/danialfarid/ng-file-upload
核心代码：
html:
<div class=”form-group”>
<label>源文件：</label>
<input class=”form-control h30 w356″ ng-model=”data.filePath”/>
<select class=”form-control h30 w143″>
<option value=””>1</option>
<option value=””>2</option>
</select>
<div class=”button” ngf-select=”fileChanged($file)”>Upload on file select</div>
</div>
js：
//var app = angular.module(‘main.app’, [‘bw.paging’, ‘cbc.datePicker’, ‘ngFileUpload’]);
//app.controller(‘main-controller’, function ($scope, $http, $log, $rootScope,
Upload) {
$scope.fileChanged = function (file) {
Upload.upload({
url: ‘/ImportSettlement/Upload’,
data: { file: file }
}).then(function (resp) {
console.log(‘Success ‘ + resp.config.data.file.name + ‘uploaded. Response: ‘ + resp.data);
}, function (resp) {
console.log(‘Error status: ‘ + resp.status);
});
}
后台代码：
[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
if (file == null)
{
return Content(“没有文件！”, “text/plain”);
}
var fileName = Path.Combine(Request.MapPath(“~/Upload”), Path.GetFileName(file.FileName));
try
{
return Content(“上传异常 ！”, “text/plain”);
//file.SaveAs(fileName);
////tm.AttachmentPath = fileName;//得到全部model信息
//tm.AttachmentPath = “../upload/” + Path.GetFileName(file.FileName);
////return Content(“上传成功！”, “text/plain”);
//return RedirectToAction(“Show”, tm);
}
catch
{
return Content(“上传异常 ！”, “text/plain”);
}
}
上述代码兼容IE10及以上浏览器，兼容IE9代码如下：
Html:
引入ng-upload-file组件
<script src=”/Scripts/angular/FileUpload/ng-file-upload.min.js”></script>
<script>
//optional need to be loaded before angular-file-upload-shim(.min).js
FileAPI = {
debug: true,
// forceLoad: true,
// html5: false, //to debug flash in HTML5 browsers
jsUrl: ‘/Scripts/angular/FileUpload/FileAPI.min.js’,
flashUrl: ‘/Scripts/angular/FileUpload/FileAPI.flash.swf’,
};
</script>
<!– for no html5 browsers support –>
<script src=”/Scripts/angular/FileUpload/ng-file-upload-shim.min.js”></script>
——————–上传部分
<div class=”button” ngf-select=”fileChanged($file)”>Upload on file select</div>
js执行
//var app = angular.module(‘main.app’, [‘bw.paging’, ‘cbc.datePicker’, ‘ngFileUpload’]);
//app.controller(‘main-controller’, function ($scope, $http, $log, $rootScope, Upload) {
$scope.fileChanged = function (file) {
Upload.upload({
url: ‘/ImportSettlement/Upload’,
data: { file: file }
}).then(function (resp) {
console.log(‘Success ‘ + resp.config.data.file.name + ‘uploaded. Response: ‘ + resp.data);
}, function (resp) {
console.log(‘Error status: ‘ + resp.status);
});
}
后台接收：
[HttpPost]
public ActionResult Upload(HttpPostedFileBase file)
{
if (file == null)
{
return Content(“没有文件！”, “text/plain”);
}
var fileName = Path.Combine(Request.MapPath(“~/Upload”), Path.GetFileName(file.FileName));
try
{
return Content(“上传异常 ！”, “text/plain”);
//file.SaveAs(fileName);
////tm.AttachmentPath = fileName;//得到全部model信息
//tm.AttachmentPath = “../upload/” + Path.GetFileName(file.FileName);
////return Content(“上传成功！”, “text/plain”);
//return RedirectToAction(“Show”, tm);
}
catch
{
return Content(“上传异常 ！”, “text/plain”);
}
其他相关
