文档章节

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

龙马行空
 龙马行空
发布于 2014/06/27 14:59
字数 879
阅读 1618
收藏 2

文件上传在系统中是一个很常见的功能,现在将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;
        }
    }
}



© 著作权归作者所有

共有 人打赏支持
龙马行空
粉丝 386
博文 127
码字总数 119251
作品 0
房山
前端工程师
AngularJS 中文资料+工具+库+Demo 大搜集

中文学习资料: 中文资料且成系统的就这么多,优酷上有个中文视频。 http://www.cnblogs.com/lcllao/archive/2012/10/18/2728787.html 翻译的官方的Guide http://www.ituring.com.cn/miniboo...

liaolzy2
2015/05/31
0
0
Angular中ui-grid的使用详解

Angular中ui-grid的使用   在项目开发的过程中,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到的表格特别多,而且表格的列数和行数也超多。为了让用户浏览更爽,产品经理...

半指温柔乐
08/05
0
0
[Angular Material完全攻略] Day 02 - 环境设定 & 安装 & Hello World

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

readilen
05/21
0
0
AngularJs学习笔记--I18n/L10n

一、I18n and L10n in AngularJS 1. 什么是I18n和L10n?   国际化(Internationalization),简称I18n,是让产品开发在一个他们可以简单地对产品进行语言、文化的本地化的方法的规范。本地化...

武文海
2015/02/06
0
0
[Angular Material完全攻略] Day 01 - 开始 & 简介

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

readilen
05/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

高三暑假我是怎么想开去学linux系统的

高三的时候,我有一句口头禅:“老了老了,现在做题越来越迟钝了”。当时整天日夜苦读,体重日益增加,脸色越来越黯淡,我在终于熬过了高考的时候,简直心里面乐得开了花。我终于可以去做自己...

linuxprobe16
8分钟前
0
0
Python 获得命令行参数的方法

需要模块:sys 参数个数:len(sys.argv) 脚本名: sys.argv[0] 参数1: sys.argv[1] 参数2: sys.argv[2]

编程老陆
15分钟前
0
0
链队

队列用链表来表示时,需要用两个变量来记录队列两端的变化:theFront,theBack. 根据链接方向的不同,链队有两种链接方式(其实就是链表的头插入节点和尾插入节点,头删除节点和尾删除节点)。...

Frost729
19分钟前
0
0
IDEA toString() json模板

public java.lang.String toString() {java.lang.StringBuilder builder = new java.lang.StringBuilder();#set ($i = 0)#foreach ($member in $members)#if ($i == 0)builder.appen......

Mtok
29分钟前
0
0
Dubbo内核实现之SPI简单介绍

Dubbo采用微内核+插件体系,使得设计优雅,扩展性强。那所谓的微内核+插件体系是如何实现的呢!即我们定义了服务接口标准,让厂商去实现(如果不了解spi的请谷歌百度下), jdk通过ServiceLo...

明理萝
34分钟前
0
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部