Ajax上传文件至MVC的controller

在前端与后端交互，ajax是最常用的方式，而后台的响应也有很多方式，在asp.net中有一般处理程序和MVC的Controller响应的方式。在使用controller来响应请求时，可以通过路由配置来定位到具体的方法，这样代码清晰，逻辑分明，但前端传到后端的参数一般是通过函数的参数来接收的，而对于文件这样较大的数据，不太方便接收，虽然有类似HttpPostedFileBase的类作为参数，但使用ajax来与其交互时变的不易处理，那有什么其他的方法呢？

有的！

上传文件由于是数据量比较大的传输，所以使用ajax的post方法，在post的时候将数据放到FormData中，如果还有其他的参数要传输，为了便于后端的接收，我们可以将其放到URL的问号后面，而后端使用函数的参数来接收，只要标识为FromUri就可以了。文件数据传输时必然是要用multipart的方式来传的，后端也自然的要以这种方式来接收。由于Post文件数据是分断的，为了保证接收，我们后端使用Task来接收。我们来看具体的代码。

前端代码

<!DOCTYPE html>
<html>
<head>
    <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>上传</title>
    <Meta charset="utf-8" />
    <link href="stylesheets/css.css" rel="stylesheet" />
    <script src="scripts/zepto.min.js"></script>
</head>
<body>
    <div class="all">
        <div id="ajaxWait" class="mask">
            <img src="images/loading.gif" />
        </div>
        <div class="head">
        </div>
        <div class="body">
            <div class="body_style">
                <div class="upload-container">
                    <div style="height:43px;">
                        <div class="upload-wrap">
                            <input type="file" id="file1" class="upload-pic" >
                            <span class="upload-text">
                                选择图片1
                            </span>
                        </div>
                    </div>
                    <div class="upload-preview-wrap">
                        <img id="fileStylePreview" class="upload-preview-img" />
                    </div>
                </div>
                <div class="upload-container">
                    <div style="height:43px;">
                        <div class="upload-wrap">
                            <input type="file" id="file2" class="upload-pic" >
                            <span class="upload-text">
                                选择图片2
                            </span>
                        </div>
                    </div>
                    <div class="upload-preview-wrap">
                        <img id="fileWearPreview" class="upload-preview-img" />
                    </div>
                </div>
                <div style="margin-bottom:5px;margin-top:5px;">
                    <label>类型</label>
                    <select id="clothesType" style="width:90px;height:30px;">
                        <option value="Type1" selected="selected">类型1</option>
                        <option value="Type1">类型2</option>
                    </select>
                </div>
                <div>
                    <input type="button" value="上传" id="btnUpload" class="upload-wrap " />
                </div>
            </div>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html>
<script type="text/javascript">
    $(document).ready(function () {
        $("#btnUpload").click(function () {
            $("#ajaxWait").show();
            var formData = new FormData();
            formData.append("file1",document.getElementById("file1").files[0]);
            formData.append("file2",document.getElementById("file2").files[0]);
            var type = $("#clothesType").val();
            $.ajax({
                url: "/api/MyFiles/Upload?type=" + type,type: "POST",data: formData,contentType: false,//必须false才会自动加上正确的Content-Type
                processData: false,//必须false才会避开jQuery对 formdata 的默认处理.XMLHttpRequest会对 formdata 进行正确的处理.
                success: function (data) {
                    $("#ajaxWait").hide();
                    if (data.Status == 0) {
                        alert("上传成功！");
                    }
                    else {
                        alert(data.Message);
                    }
                },error: function (data) {
                    $("#ajaxWait").hide();
                    alert("上传失败！" + data.Message);
                }
            });
        });

        function fileInputChang(obj) {
            var id = obj.target.id;
            var files = document.getElementById(id).files;
            var img = document.getElementById(id + "Preview");
            if (!files || files.length <= 0) {
                img.src = "";
                return;
            }
            var file;
            if (files && files.length > 0) {
                // 获取目前上传的文件
                file = files[0];
                // 那么我们可以做一下诸如文件大小校验的动作
                if (file.size > 1024 * 1024 * 2) {
                    alert('图片大小不能超过 2MB!');
                    return false;
                }

                // 图片预览 function 1
                if (window['FileReader']) {
                    var reader = new FileReader();
                } else {
                    alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！");
                }
                var reader = new FileReader();
                var imageType = /^image\//;
                //是否是图片
                if (!imageType.test(file.type)) {
                    alert("请选择图片！");
                    return;
                }
                //读取完成
                reader.onload = function (e) {
                    //图片路径设置为读取的图片
                    img.src = this.result;
                };
                reader.readAsDataURL(file);
            }
        }

        $("#fileStyle").change(fileInputChang);
        $("#fileWear").change(fileInputChang);
    });
</script>

后端代码

using System;
using System.Collections.Generic;
using System.Data;
using System.IO;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Threading;
using System.Threading.Tasks;
using System.Web;
using System.Web.Http;

namespace UploadDemo.Controllers
{
    public class MyFilesController : ApiController
    {       

        #region Upload
        [HttpPost]
        public BaseDataPackage<string> Upload([FromUri]TryClothesTypeEnum type)
        {
            var result = new BaseDataPackage<string>();
            if (!Request.Content.IsMimeMultipartContent())
            {
                result.Status = StatusCode.Fail;
                result.Message = "Data Invalid";
                result.Data = null;
                return result;
            }

            var server = HttpContext.Current.Server;
            string webRoot = "~/Upload/" + type.ToString();
            string physicsRoot = server.MapPath(webRoot);//保存上传文件的目录

            if (!Directory.Exists(physicsRoot))
            {
                Directory.CreateDirectory(physicsRoot);
            }

            var provider = new RenameMultipartFormDataStreamProvider(physicsRoot);
            IEnumerable<HttpContent> parts = null;
            Task.Factory
                .StartNew(() =>
                {
                    parts = Request.Content.ReadAsMultipartAsync(provider).Result.Contents;
                },CancellationToken.None,TaskCreationOptions.LongRunning,//确保线程分离
                TaskScheduler.Default)
                .Wait();

            try
            {  
                result.Status = StatusCode.OK;
                result.Message = "OK";
                result.Data = null;
            }
            catch (Exception ex)
            {
                result.Status = StatusCode.Fail;
                result.Message = ex.Message;
                result.Data = null;
            }

            return result;

        }

        #region RenameMultipartFormDataStreamProvider
        /// <summary>
        /// 重命名上传的文件
        /// </summary>
        public class RenameMultipartFormDataStreamProvider : MultipartFormDataStreamProvider
        {
            #region 属性
	    /// <summary>
            /// 上传的文件名列表
            /// </summary>
            public List<string> FileNameList { get; set; } = new List<string>();
            #endregion

            public RenameMultipartFormDataStreamProvider(string root)
                : base(root)
            { }

            public override string GetLocalFileName(HttpContentHeaders headers)
            {
                //截取文件扩展名
                string ext = Path.GetExtension(headers.ContentDisposition.FileName.TrimStart('\"').TrimEnd('\"'));
                string fileName = Guid.NewGuid().ToString().ToUpper() + ext; //base.GetLocalFileName(headers);
                if (!FileNameList.Contains(fileName))
                {
                    FileNameList.Add(fileName);
                }
                return fileName;
            }
        }
        #endregion
        #endregion
       
    }
   
}

其中RenameMultipartFormDataStreamProvider是对上传文件进行重命名的类，继承自MultipartFormDataStreamProvider，MultipartFormDataStreamProvider会自动将上传的文件数据合并成FileStream，并会写入到重命名的所命名的文件中，为了便于调取文件名，特别增加了一个FileNameList属性来保存上传文件的原始文件名。

基本的数据包类

/// <summary>
    /// 基本数据包
    /// </summary>
    public class BaseDataPackage<T>
    {
        /// <summary>
        /// 状态(参见<seealso cref="StatusCode"/>)
        /// </summary>
        public int Status { get; set; }

        /// <summary>
        /// 信息
        /// </summary>
        public string Message { get; set; }

        /// <summary>
        /// 具体数据
        /// </summary>
        public T Data { get; set; }


        #region IsOK Function              
        /// <summary>
        /// 是否OK
        /// </summary>
        /// <returns></returns>
        public bool IsOK()
        {
            return Status == 0;//StatusCode.OK;
        }
        #endregion
    }

状态类

  public class StatusCode
    {
        public const int OK = 0;

        public const int Fail = -1;
    }

附上用到的CSS样表

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-image: url(/images/bg.jpg);
}

.all {
    height: 740px;
    width: 980px;
    margin: auto;
}

.head {
    height: 66px;
    width: 980px;
    float: left;
}

.body {
    height: 596px;
    width: 980px;
    float: left;
}

.body_style {
    height: 596px;
    width: 262px;
    float: left;
    background-image: url(images/body_02.jpg);
}

.footer {
    height: 78px;
    width: 980px;
    float: left;
}

.upload-preview-wrap {
    border: 1px solid;
    width: 100px;
    height: 120px;
    margin-top: 5px;
    margin-left: 5px;
    margin-right: 5px;
    margin-bottom: 5px;
}

.upload-preview-img{
    width:100px;
    height:120px;
}

.upload-wrap {
    position: relative;
    width: 158px;
    height: 43px;
    font-size: 16px;
    border: 1px solid #cacbcc;
    line-height: 43px;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    background: #3385ff;
    border-bottom: 1px solid #2d78f4;
    float: left;
}

.upload-pic {
    position: absolute;
    font-size: 0;
    width: 100%;
    height: 100%;
    outline: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    margin-left: -18px;
    z-index: 1;
    cursor: pointer;
}

.upload-container {
    height:180px;
}

.mask{
    width: 100%;
    height: 100%;
    background: rgba(0,0.8);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 998;
    display: none;
    text-align:center;
    padding-top:10%;
}

转载请注明出处

Ajax上传文件至MVC的controller

猜你在找的Ajax相关文章