Jquey Form 异步提交文件参数并且在http 信息头header中加上一定参数

1、下载jQuery.Form 包

官网下载：http://jquery.malsup.com/form/#download

2、模拟代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>上传图片测试</title>
    <script src="js/jquery-1.8.2.js"></script>
    <script src="js/jquery.form.js"></script>
    
    <script type="text/javascript">
        function UpdateUserInfo() {
            var Id = $("input[name='Id']").val();
            var NickName = $("input[name='NickName']").val();
            var RealName = $("input[name='RealName']").val();
            $("#formDemo").ajaxSubmit({
                url: '/Test/Submit?Id='+Id+'&RealName='+RealName+'&NickName='+NickName, /*设置post提交到的页面*/
                type: "post", /*设置表单以post方法提交*/
                headers:
                {
                    AuthCode: "123456789"
                },
                dataType: "json", /*设置返回值类型为文本*/
                success: function (data) {
                    //alert(data);
                    var txt = "<p>Id:"+data.Id+"</p><p>RealName:"+data.RealName+"</p><p>NickName:"+data.NickName+"</p><p><img src='"+data.HeadUrl+"' /></p>";
                    $("#txt").empty().append($(txt));
                },
                error: function (error) {
                    alert(error);
                    console.info(error);
                }

            });
        }


        function submitForm() {
            UpdateUserInfo();
        }
    </script>

</head>
<body>
    <h1>上传图片测试</h1>
    <form id="formDemo" method="post" enctype="multipart/form-data">
        <input type="hidden" name="Id" value="69A26DD9-4A83-47DC-B0A1-172224037C95" /> <br /><br />
        RealName: <input type="text" name="RealName" value="RealName" /><br /><br />
        NickName: <input type="text" name="NickName" value="NickName" /><br /><br />
        头像：<input type="file" name="HeadUrl" /> <br /><br />
        <input type="button" value="测试" onclick="submitForm()" />

    </form>
    <div id="txt">
        
    </div>
</body>
</html>

3、action 代码：

  /// <summary>
        /// 上传文件 修改上传文件名称 也不包含后缀名
        /// </summary>
        /// <returns></returns>
        [HttpPost, Route("Submit")]
        public async Task<JsonResult<UserModel>> Submit(string Id,string RealName,string NickName)
        {
            try
            {
                string headUrl = string.Empty; 
                //web api 获取项目根目录下指定的文件下
                var root = System.Web.Hosting.HostingEnvironment.MapPath("/Resource/Images");
                //对上传文件重新命名 根据需求对应修改文件名称 不包含后缀名 只是前缀名
                var provider = new RenamingMultipartFormDataStreamProvider(root);

                //文件已经上传  但是文件没有后缀名  需要给文件添加后缀名
                await Request.Content.ReadAsMultipartAsync(provider);

                foreach (var file in provider.FileData)
                {
                    //这里获取含有双引号'" '
                    string filename = file.Headers.ContentDisposition.FileName.Trim('"');
                    //获取对应文件后缀名
                    string fileExt = filename.Substring(filename.LastIndexOf('.'));

                    FileInfo fileinfo = new FileInfo(file.LocalFileName);
                    //fileinfo.Name 上传后的文件路径 此处不含后缀名 
                    //修改文件名 添加后缀名
                    string newFilename = fileinfo.Name + fileExt;
                    //最后保存文件路径
                    string saveUrl = Path.Combine(root, newFilename);
                    fileinfo.MoveTo(saveUrl);

                    headUrl = "/Resource/Images/" + newFilename;
                }
                UserModel model = new UserModel()
                {
                    Id = Id,
                    NickName = NickName,
                    RealName = RealName,
                    HeadUrl = headUrl
                };

                return Json<UserModel>(model);
            }
            catch (Exception ex)
            {
                throw ex;
            }
        }