webAPI+angularJS文件上传和下载

开发框架

前端

angularJS1.6

下载和保存文件FileSaver:https://github.com/eligrey/FileSaver.js/

后端

.net WebAPI

1 导入Excel文件关键代码

1.1 导入Excel弹出框

1.2 模态框html代码

   <div class="modal fade" id="importExcelPop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" style="width:610px;height:100px;" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">导入Excel文件</div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" id="importExcelForm">
                        <div class="form-group">
                            <label for="import" class="col-sm-2 control-label">选择文件:</label>
                            <div class="col-sm-5">
                                <div class="form-control" type="text" name="fileName" readonly placeholder="" ng-required="isAdd" title="{{file ? file.name : ‘‘}}">
                                    {{file ? file.name : ‘‘ | limitString :20}}
                                </div>
                            </div>
                            <div class="col-sm-5">
                                <button type="button" type="file" ngf-select ng-model="file" accept=".xls,.xlsx" class="btn btn-not-important browse inline-div">{{‘Browse‘ | translate }}</button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer" style="padding-left:113px;">
                    <button type="button" class="btn btn-primary" ng-disabled="!file" ng-click=”upload()">导入</button>
                    <button type="button" class="btn btn-third" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>

1.3 导入js代码

// 上传文件地址
var uploadUrl = apiInterceptor.webApiHostUrl + ‘/test/Upload‘;
// angularjs上传方法
$scope.upload = function() {if ($scope.file) {
        // 选中文件
        importData();
    }
};

// 导入数据
var importData = function() {
    if (!$scope.file || !$scope.file.name) {

        SweetAlert.info(‘请选择文件‘);
        return;
    }

    // $q需要注入
    var deferred = $q.defer();
    var tempFileName = PWC.newGuid() + ‘.dat‘;
    var token = $(‘input[name="__RequestVerificationToken"]‘).val();

    Upload.upload({
        url: uploadUrl,
        data: {
            cancel: false,
            filename: $scope.file.name,
        },
        file: $scope.file,
        resumeChunkSize: resumable ? $scope.chunkSize : null,
        headers: {
            ‘Access-Control-Allow-Origin‘: ‘*‘,
            Authorization: apiInterceptor.tokenType + ‘ ‘ + apiInterceptor.apiToken,
            __RequestVerificationToken: token,
            withCredentials: true
        },
        __RequestVerificationToken: token,
        withCredentials: true
    }).then(function(resp) {
        var ret = resp.data;
        deferred.resolve();

    }, function(resp) {
        deferred.resolve();

        console.log(‘Error status: ‘ + resp.statusText);
    }, function(evt) {
        deferred.resolve();
        var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
        $log.debug(‘progress: ‘ + progressPercentage + ‘% ‘ + evt.config.data.file.name);
    });
};

1.4 webAPI的TestController方法

/// <summary>
 /// Uploads this instance.
 /// </summary>
 /// <returns></returns>
 [Route("Upload")]
 [HttpPost]
 public IHttpActionResult Upload() {
     if (HttpContext.Current.Request.Files.Count == 0) {
         return this.Ok(new OperationResultDto() { Result = false, ResultMsg = Message.Error.NoFile });
     }

     var file = HttpContext.Current.Request.Files[0];
     var mappedPath = HostingEnvironment.MapPath("~/Upload");
     var fileFullPath = Path.Combine(mappedPath, Guid.NewGuid().ToString().ToUpper() + Path.GetFileName(file.FileName));

     var saveFileResult = this.SaveFile(file, mappedPath, fileFullPath);
     if (!saveFileResult.Result) {
         return this.Ok(saveFileResult);
     }

     OperationResultDto ret = new OperationResultDto();
     string errorMsg = string.Empty;
     Dictionary < System.Guid, string > error = new Dictionary < Guid, string > ();

     try {
         // 读取Excel文件,自己实现
         // var getImportDataResult = this.GetImportFileData(mappedPath, fileFullPath);
         // if (!getImportDataResult.Result) {
         //     return this.Ok(getImportDataResult);
         // }

         // 业务处理

     } catch (Exception ex) {
         errorMsg = ex.Message.ToString();
         error.Add(System.Guid.NewGuid(), ex.StackTrace.ToString());
     } finally {
         File.Delete(fileFullPath);
     }

     if (!string.IsNullOrEmpty(errorMsg)) {
         ret.ResultMsg = errorMsg;
         ret.Errors = error;
     }

     return this.Ok(ret);
 }

 /// <summary>
 /// Saves the file.
 /// </summary>
 /// <param name="file">The file.</param>
 /// <param name="mappedPath">The mapped path.</param>
 /// <param name="fileFullPath">The file full path.</param>
 /// <returns></returns>
 private OperationResultDto SaveFile(HttpPostedFile file, string mappedPath, string fileFullPath) {
     string errorMsg = string.Empty;
     Dictionary < System.Guid, string > error = new Dictionary < Guid, string > ();
     try {
         if (Directory.Exists(mappedPath) == false) {
             Directory.CreateDirectory(mappedPath);
         }
         file.SaveAs(fileFullPath);
     } catch (Exception ex) {
         errorMsg = Message.Error.SaveFileError;
         error.Add(System.Guid.NewGuid(), ex.StackTrace.ToString());
     }
     return new OperationResultDto() { ResultMsg = errorMsg, Result = string.IsNullOrEmpty(errorMsg), Errors = error };
 }

2 下载Excel关键代码

2.1 UI

2.2 html代码

<button type="button" class="btn" ng-click="down ()"> <i class="fa fa-download" aria-hidden="true"></i>下载模板</button>

2.3 js代码

Js Controller代码

$scope.down = function() {
    testService. download ();
};

Js webservice方法

download: function() {
     var thisConfig = apiConfig.create();
     thisConfig.responseType = "arraybuffer";
     return $http.post(‘/test/download‘, {}, thisConfig).then(function(response) {
         var data = new Blob([response.data], { type: response.headers(‘Content-Type‘) });
         // var filename1 = response.headers(‘Content-Disposition‘).split(‘;‘)[1].trim().substr(‘filename=‘.length);
         var filename = ‘Excel.xlsx‘;
        // FileSaver 是一个插件
         FileSaver.saveAs(data, filename);
     });
 }

2.4 webAPI方法

[HttpPost]
[Route("download")]
public HttpResponseMessage Download (object o) {
    var filePath = HostingEnvironment.MapPath("~/downLoad/Excel.xlsx");
    string customFileName = Constant.FileName + DateTime.Now.ToString("yyyyMMddHHmmss") + ".xlsx"; //客户端保存的文件名  

    FileStream fileStream = new FileStream(filePath, FileMode.Open, FileAccess.Read, FileShare.Read);
    System.IO.MemoryStream ms = new System.IO.MemoryStream();
    fileStream.CopyTo(ms);
    var response = this.Request.CreateResponse(HttpStatusCode.OK);
    response.Content = new ByteArrayContent(ms.ToArray());
    response.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("attachment");
    response.Content.Headers.ContentDisposition.FileName = customFileName;
    response.Content.Headers.ContentType = new System.Net.Http.Headers.MediaTypeHeaderValue("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"); // 这句话要告诉浏览器要下载文件
    return response;
}
时间: 2024-10-10 22:40:04

webAPI+angularJS文件上传和下载的相关文章

JavaWeb学习总结(五十)——文件上传和下载

在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件.这个common-fileupload上传组件的jar包可以去apache官网上面下载,也可以在struts的lib文件夹下面找到,stru

深入分析JavaWeb Item40 -- 文件上传和下载

在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件.这个common-fileupload上传组件的jar包可以去apache官网上面下载,也可以在struts的lib文件夹下面找到,stru

文件上传与下载!

1.上传: 1.上传数据的类型:字符,字节 1.文本类型(字符):通过url网址的?:通过表单元素:AJAX. 2.文件类型(字节):通过表单元素(file). 2.上传文件的方式: 1.form表单实现文件上传:常用方式(上传文件用post,不用get,因为get方式对于上传量有限) 通过鼠标单击,在File标签中选择的文件,才能上传. 2.通过AJAX实现文件上传:禁用方式   AJAX的数据传递通过javascript脚本取值.如果传递文件,那么也需要通过javascript脚本获取文件内

springmvc和servlet下的文件上传和下载(存文件目录和存数据库Blob两种方式)

项目中涉及了文件的上传和下载,以前在struts2下做过,今天又用springmvc做了一遍,发现springmvc封装的特别好,基本不用几行代码就完成了,下面把代码贴出来: FileUpAndDown.jsp <%@ page language="java" contentType="text/html; charset=UTF-8"%> <html> <head> <title>using commons Uplo

struts2中的文件上传和下载

天下大事,必做于细.天下难事,必作于易. 曾经见过某些人,基础的知识还不扎实就去学习更难的事,这样必然在学习新的知识会很迷惑结果 再回来重新学习一下没有搞懂的知识,这必然会导致学习效率的下降!我写的这篇上传和下载都很基础. 十分适合初学者! jsp:页面 <!--在进行文件上传时,表单提交方式一定要是post的方式,因为文件上传时二进制文件可能会很大,还有就是enctype属性,这个属性一定要写成multipart/form-data, 不然就会以二进制文本上传到服务器端--> <for

JavaWeb文件上传和下载

在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请 求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件.这个common- fileupload上传组件的jar包可以去apache官网上面下载,也可以在struts的lib文件夹下面找到,st

Linux 指令篇:文件上传和下载 lrzsz

[ "lrzsz"一般用于SecureCRT ssh中使用 ] 简介:rz,sz是早期Linux/Unix同Windows进行ZModem文件传输的命令行工具.rz ,sz 是非常古老的zmodem协议使用的上传下载命令,早就被抛弃了的东西,目前的发行版基本都不再预装. 优点:比ftp命令方便,而且服务器不用打开FTP服务. 命令sz:将选定的文件发送(send)到本地机器 命令rz:运行该命令会弹出一个文件选择窗口,从本地选择文件上传到Linux服务器. lrzsz安装方法: [[e

FileUpload系列:(3)文件上传和下载示例

示例由1个Servlet和3个JSP组成. 1.FileServlet package com.rk.web.servlet; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.net.URLEncoder; import java.util.Has

JavaWeb学习总结,文件上传和下载

在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用Servlet获取上传文件的输入流然后再解析里面的请求参数是比较麻烦,所以一般选择采用apache的开源工具common-fileupload这个文件上传组件.这个common-fileupload上传组件的jar包可以去apache官网上面下载,也可以在struts的lib文件夹下面找到,stru