文档章节

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

龙马行空
 龙马行空
发布于 2014/06/27 14:59
字数 879
阅读 1666
收藏 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;
        }
    }
}



© 著作权归作者所有

共有 人打赏支持
龙马行空
粉丝 388
博文 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
使用 ng-packagr 打包 Angular

写在前面 为了让 Angular 类库应用范围更自由,Angular 提出一套打包格式建议名曰:Angular Package Format,包括 FESM2015、FESM5、UMD、ESM2015、ESM5、ES2015 格式,不同格式可以在不同的...

卡色
09/29
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

没有更多内容

加载失败,请刷新页面

加载更多

Shell特殊符号总结以及cut,sort,wc,uniq,tee,tr,split命令

特殊符号总结一 * 任意个任意字符 ? 任意一个字符 # 注释字符 \ 脱义字符 | 管道符 # #号后的备注被忽略[root@centos01 ~]# ls a.txt # 备注 a.txt[root@centos01 ~]# a=1[root@centos01...

野雪球
35分钟前
1
0
OSChina 周二乱弹 —— 程序员圣衣

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @达尔文:分享Skeeter Davis的单曲《The End of the World》 《The End of the World》- Skeeter Davis 手机党少年们想听歌,请使劲儿戳(这里...

小小编辑
50分钟前
4
0
[ python import module ] 导入模块

import moudle_name ----> import module_name.py ---> import module_name.py文件路径 -----> sys.path (这里进行查找文件) # from app.web import Personimport app.web.Person as Pe......

_______-
昨天
3
0
Redis性能问题排查解决手册

一、性能相关的数据指标 通过Redis-cli命令行界面访问到Redis服务器,然后使用info命令获取所有与Redis服务相关的信息。通过这些信息来分析文章后面提到的一些性能指标。 nfo命令输出的数据可...

IT--小哥
昨天
1
0
mixin混入

①新建mixin.js文件 const mixin = { methods: { /** * 分页公共方法 */ handleSizeChange(val) { this.pageData.size = val; this.query(); }, hand......

不负好时光
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部