文档章节

Angular文件上传---fileUpload的使用

龙马行空
 龙马行空
发布于 2014/06/27 14:59
字数 879
阅读 1580
收藏 2
点赞 0
评论 0

文件上传在系统中是一个很常见的功能,现在将angular文件上传的代码总结一下。在此特别感谢同事陈卫兵提供的思路总结。

1、前端页面

(1)提交的时候用ng-submit进行提交。

(2)form表单的enctype属性改为multipart/form-data

(3)增加一个文件上传的input

 <form ng-submit="submitDrgMetaData()" enctype="multipart/form-data">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title">新增信息</h4>
                </div>
                <div class="modal-body clearfix">

                    <div class="col-md-4" ng-repeat=" con in Drgaggregate">
                        <label>{{con.chName}}</label><input type="text" ng-model="DrgObj[con.field]"
                                                            pattern="({{con.pattern}})"
                                                            class="{{con.className}}"
                                                            title="{{con.errorMsg}}"/>
                    </div>
                    <div class="col-md-4">
                        <label>上传文件</label>
                        <input type="file" id="Drgfile-to-upload" class="inpbackblue">
                    </div>
                </div>
                <div class="modal-footer ">
                    <button type="submit" class="btn btn-danger">确定</button>

                </div>
            </div>
        </form>

2、angular中的处理

(1)在define中要引入fileUpload和angularFileUpload模块

配置paths和shim
fileUpload: 'scripts/js/file-upload/angular-file-upload',

define(['angular','./basicData_service', 'fileUpload'], function (angular) {
    'use strict';
    angular.module('apt.basicData.controllers', ['apt.basicData_service', 'angularFileUpload'])

// 表格数据和文件上传事件
            $scope.submitMetaData = function () {
                $scope.imgObj.RefId = $scope.id;
                console.log($scope.imgObj);
                var $file = document.getElementById('file-to-upload').files[0];
                console.info($file);

                $upload.upload({
                    url: 'http://localhost:8888/api/ImageMetaData',
                    method: "POST",
                    data: {data: $scope.imgObj},
                    file: $file
                }).then(function (response) {
                    $scope.getImgMetaData($scope.id)
                       $('#ImageMetaFrom').modal('hide');

                });


            }

3、后台的处理

(1)后台中的数据和文件是分别获取的。

 // POST api/tombskeepingstatus
        public virtual HttpResponseMessage Post()
        {
            if (ModelState.IsValid)
            {
                if (!Request.Content.IsMimeMultipartContent("form-data"))
                    throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);

                var form = HttpContext.Current.Request.Form["data"];
                ImageMetaData image = JsonHelper.DeserializeFromJson<ImageMetaData>(form);//ConvertToModel(form);


                //获取表单中的文件

                var fileinfo = HttpContext.Current.Request.Files[0];
                image.RomotePath = FileLoadHelper.Up(fileinfo);
                tasks.SaveOrUpdate(image);
                /* var message = new HttpRequestMessage();*/
                /*message.Headers.Add("FileName", result.);
                message.Headers.Add("Directory", result.Directory);*/
                /* return base.Post(value);*/
                
                HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.Created,image);
                return response;
            }
            else
            {
                return Request.CreateResponse(HttpStatusCode.BadRequest);
            }
        }

namespace Apt.MWSGR.Domain.Utils
{
    using System;

    /// <summary>
    /// 
    /// </summary>
    public class JsonHelper
    {
        /// <summary>
        /// 序列化
        /// </summary>
        /// <param name="obj">要序列化的实体</param>
        /// <returns>序列化后的字符串</returns>
        public static string SerializeToJson(object obj)
        {
            //Json.Net
            return Newtonsoft.Json.JsonConvert.SerializeObject(obj);
        }

        /// <summary>
        /// 反序列化
        /// </summary>
        /// <param name="json"></param>
        /// <returns></returns>
        public static Object DeserializeFromJson(string json)
        {
            return Newtonsoft.Json.JsonConvert.DeserializeObject(json);
        }

        /// <summary>
        /// 反序列化
        /// </summary>
        /// <typeparam name="T"></typeparam>
        /// <param name="json"></param>
        /// <returns></returns>
        public static T DeserializeFromJson<T>(string json)
        {
            return Newtonsoft.Json.JsonConvert.DeserializeObject<T>(json);
        }
    }
}

namespace Apt.MWSGR.Infrastructure.Utils
{
    using System.IO;
    using System.Web;

    public class FileLoadHelper
    {
        /// <summary>
        /// 文件根目录
        /// </summary>
        private static readonly string Root = HttpContext.Current.Server.MapPath("~/Files/");

        /// <summary>
        /// 文件上传
        /// </summary>
        /// <param name="file"></param>
        /// <returns></returns>
        public static string Up(HttpPostedFile file)
        {
            // 根据MD5,计算存放路径
            string result = Md5Helper.GetMd5FromFile(file.InputStream);
            result = result.Replace('-', '\\');
            string filename = result.Substring(result.LastIndexOf('\\'));

            string filePath = Path.Combine(Root, result.Substring(0, result.LastIndexOf('\\') + 1));
            string fileType = file.FileName.Substring(file.FileName.LastIndexOf('.'));
            Directory.CreateDirectory(filePath);
            file.SaveAs(filePath.Trim('\\') + filename + fileType);
            return result+fileType;
        }
    }
}

namespace Apt.MWSGR.Infrastructure.Utils
{
    using System;
    using System.IO;
    using System.Linq;
    using System.Security.Cryptography;
    using System.Text;

    public class Md5Helper
    {
        /// <summary>
        /// 将一个string 通过默认MD5算法得到散列字符串
        /// </summary>
        /// <param name="input">源字符串</param>
        /// <returns>散列字符串</returns>
        /// 
        public static string GetMd5FromString(string input)
        {
            MD5 md5 = MD5.Create();
            byte[] buffer = Encoding.UTF8.GetBytes(input);
            buffer = md5.ComputeHash(buffer);
            md5.Clear();
            md5.Dispose();
            return BitConverter.ToString(buffer);
        }
        /// <summary>
        /// 由文件全路径获取一个文件的MD5值,采用默认算法
        /// </summary>
        /// <param name="path">文件全路径</param>
        /// <returns></returns>
        public static string GetMd5FromFile(string path)
        {
            string res = "";
            //MD5 md5 = MD5.Create();
            using (FileStream fs = File.OpenRead(path))
            {
                //byte[] buffer = md5.ComputeHash(fs);
                //md5.Clear();
                //md5.Dispose();
                //res = BitConverter.ToString(buffer);
                res = GetMd5FromFile(fs);
            }
            //md5.ComputeHash();
            return res;
        }

        /// <summary>
        /// 由Stream得到一个MD5字符串
        /// </summary>
        /// <param name="stream">Stream</param>
        /// <returns>MD5</returns>
        public static string GetMd5FromFile(Stream stream)
        {
            string res = "";
            MD5CryptoServiceProvider md5 = new MD5CryptoServiceProvider();
            byte[] buffer = md5.ComputeHash(stream);
            buffer = buffer.Skip(4).Take(8).ToArray();
            md5.Clear();
            md5.Dispose();
            res = BitConverter.ToString(buffer);
            return res;
        }
    }
}



© 著作权归作者所有

共有 人打赏支持
龙马行空
粉丝 385
博文 126
码字总数 102118
作品 0
房山
前端工程师
[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

今天我们将开始正式迈入Angular Material的世界,要学习使用Angular Material打造高品质及高质感的网页,当然要从安装Angular Material套件开始,本篇文章就来介绍基本的Angular Material安装...

readilen ⋅ 05/21 ⋅ 0

[Angular Material完全攻略] Day 01 - 开始 & 简介

转载 从Angular第2版正式release后,根据全球最大工程师讨论区StackOverflow的统计,从2016开始的Angular讨论度就不断窜升,甚至超越了React,直到了2017年,甚至摆脱了前一代Angularjs的阴影...

readilen ⋅ 05/21 ⋅ 0

【前端】—聊聊我认识的Angular

前言 最近接触的项目前端用到了Angular框架,之前略有耳闻,从vue换到Angular,感觉东西差不多,还是要系统学习的,先来了解下。 正文 1、Angular 的发展 AngularJS 是一款来自Google的前端J...

zt15732625878 ⋅ 05/19 ⋅ 0

Angular 6.0正式版发布,都有哪些新功能

点击关注异步图书,置顶公众号 每天与你分享IT好书 技术干货 职场知识 在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在...

异步社区 ⋅ 05/08 ⋅ 0

Angular 6正式版发布,都有哪些新功能

在Angular 5发布半年之后,Angular 6在昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。除此之外,这次更新还包括框架包(@angu...

code_xzh ⋅ 05/05 ⋅ 0

JavaScript MVW 框架 - AngularJS

Angular JS (Angular.JS) 是一组用来开发 Web 页面的框架、模板以及数据绑定和丰富 UI 组件。它支持整个开发进程,提供 Web 应用的架构,无需进行手工 DOM 操作。 AngularJS 很小,只有 60K,...

匿名 ⋅ 2011/01/20 ⋅ 44

勿以 star 数论高低!React 在前端框架世界仍是领先地位

上周在前端的 JavaScript 框架世界发生了一件称得上是“里程碑”的事:Vue.js 在 GitHub 上的 star 数量终于超过了 React.js 的 star 数量。 通过使用一个叫做 Star History 的工具,我们可以...

局长 ⋅ 06/21 ⋅ 0

Angular 的 Material Design 风格框架 - Angular Material

Material Design for Angular 是 Angular 官方团队开发的基于最新版本 Angular 的 Material Design 风格的框架,可和 Nest.js 搭配使用做全栈开发。 针对 Angular 1 版本的实现 https://www....

匿名 ⋅ 05/15 ⋅ 0

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊?

初学angular 看到网上有angular js 也有angular2 ,到angular官网发现最近版本是6了,那么现在大家说的angular js到底是什么啊? angular2和现在官网的angular6 就是 angular js 只是版本不同...

Jordan裔 ⋅ 05/19 ⋅ 0

构建 Web 应用程序的开发平台 Angular 6.0.0-rc.5 发布

Angular 6.0.0-rc.5 发布了。Angular 是一个使用 TypeScript / JavaScript 和其他语言构建移动和桌面 Web 应用程序的开发平台。 官方暂未提供更新内容,您可以查看以下页面保持关注: 发布主...

周其 ⋅ 04/15 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

个人博客的运营模式能否学习TMALL天猫质量为上?

心情随笔|个人博客的运营模式能否学习TMALL天猫质量为上? 中国的互联网已经发展了很多年了,记得在十年前,个人博客十分流行,大量的人都在写博客,而且质量还不错,很多高质量的文章都是在...

原创小博客 ⋅ 22分钟前 ⋅ 0

JavaScript零基础入门——(十一)JavaScript的DOM操作

JavaScript零基础入门——(十一)JavaScript的DOM操作 大家好,欢迎回到我们的JavaScript零基础入门。最近有些同学问我说,我讲的的比书上的精简不少。其实呢,我主要讲的是我在开发中经常会...

JandenMa ⋅ 今天 ⋅ 0

volatile和synchronized的区别

volatile和synchronized的区别 在讲这个之前需要先了解下JMM(Java memory Model :java内存模型):并发过程中如何处理可见性、原子性、有序性的问题--建立JMM模型 详情请看:https://baike.b...

MarinJ_Shao ⋅ 今天 ⋅ 0

深入分析Kubernetes Critical Pod(一)

Author: xidianwangtao@gmail.com 摘要:大家在部署Kubernetes集群AddOn组件的时候,经常会看到Annotation scheduler.alpha.kubernetes.io/critical-pod"="",以表示这是一个关键服务,那你知...

WaltonWang ⋅ 今天 ⋅ 0

原子性 - synchronized关键词

原子性概念 原子性提供了程序的互斥操作,同一时刻只能有一个线程能对某块代码进行操作。 原子性的实现方式 在jdk中,原子性的实现方式主要分为: synchronized:关键词,它依赖于JVM,保证了同...

dotleo ⋅ 今天 ⋅ 0

【2018.06.22学习笔记】【linux高级知识 14.4-15.3】

14.4 exportfs命令 14.5 NFS客户端问题 15.1 FTP介绍 15.2/15.3 使用vsftpd搭建ftp

lgsxp ⋅ 今天 ⋅ 0

JeeSite 4.0 功能权限管理基础(Shiro)

Shiro是Apache的一个开源框架,是一个权限管理的框架,实现用户认证、用户授权等。 只要有用户参与一般都要有权限管理,权限管理实现对用户访问系统的控制,按照安全规则或者安全策略控制用户...

ThinkGem ⋅ 昨天 ⋅ 0

python f-string 字符串格式化

主要内容 从Python 3.6开始,f-string是格式化字符串的一种很好的新方法。与其他格式化方式相比,它们不仅更易读,更简洁,不易出错,而且速度更快! 在本文的最后,您将了解如何以及为什么今...

阿豪boy ⋅ 昨天 ⋅ 0

Python实现自动登录站点

如果我们想要实现自动登录,那么我们就需要能够驱动浏览器(比如谷歌浏览器)来实现操作,ChromeDriver 刚好能够帮助我们这一点(非谷歌浏览器的驱动有所不同)。 一、确认软件版本 首先我们...

blackfoxya ⋅ 昨天 ⋅ 0

线性回归原理和实现基本认识

一:介绍 定义:线性回归在假设特证满足线性关系,根据给定的训练数据训练一个模型,并用此模型进行预测。为了了解这个定义,我们先举个简单的例子;我们假设一个线性方程 Y=2x+1, x变量为商...

wangxuwei ⋅ 昨天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部