ASP.NET MVC 与Form表单交互

一,Form包含文件类（单选文件）

<form id="ImgForm" method="POST" enctype="multipart/form-data" name="ImgForm" action="/From/SubmitForm">
                <input type="file" name="fileData" >
                <br />
                <input type="text" name="name" />
                <br />
                <input type="password" name="password" />
                <br />
                <input type="submit" value="上传" />
            </form>

C#

[HttpPost]
        public void SubmitForm(HttpPostedFileBase fileData, FormCollection collection)
        {
            string name = collection["name"];
            string passowrd = collection["password"];
            string image = fileData.FileName.ToString();
            string imageGuid = Guid.NewGuid().ToString() + ".jpg";
            string path = System.Web.HttpContext.Current.Server.MapPath("~/QRimage/") + imageGuid;//只是用于演示简单的上传删除方法
            fileData.SaveAs(path);
            string deletePath = "http://wx115.cnpsim.com/QRimage/" + imageGuid;
            var img = new FileInfo(path);
            if (img.Exists) img.Delete();
        }

　　

二,Form包含文件类（多选文件）

<div>
            <form id="ImgForm" method="POST" enctype="multipart/form-data" name="ImgForm" action="/From/SubmitForm">
                <input type="file" name="fileData" multiple />
                <br />
                <input type="text" name="name" />
                <br />
                <input type="password" name="password" />
                <br />
                <input type="submit" value="上传" />
            </form>
        </div>

　C#

 [HttpPost]
        public void SubmitForm(HttpPostedFileBase[] fileData, FormCollection collection)
        {
            string name = collection["name"];
            string passowrd = collection["password"];
            foreach (var file in fileData)
            {
                string image = file.FileName.ToString();
                string imageGuid = Guid.NewGuid().ToString() + ".jpg";
                string path = System.Web.HttpContext.Current.Server.MapPath("~/QRimage/") + imageGuid;//只是用于演示简单的上传删除方法
                file.SaveAs(path);
                string deletePath = "http://wx115.cnpsim.com/QRimage/" + imageGuid;
                var img = new FileInfo(path);
                if (img.Exists) img.Delete();
            }
        }

二,Form包含文件类（多选文件多Input file）

<div>
            <form id="ImgForm" method="POST" enctype="multipart/form-data" name="ImgForm" action="/From/SubmitForm">
                <input type="file" name="fileData" multiple />
                <br />
                <input type="file" name="fileData" multiple />
                <br />
                <input type="file" name="fileData" multiple />
                <br />
                <input type="text" name="name" />
                <br />
                <input type="password" name="password" />
                <br />
                <input type="submit" value="上传" />
            </form>
        </div>

C#

  [HttpPost]
        public void SubmitForm(FormCollection collection)
        {
            string name = collection["name"];
            string passowrd = collection["password"];
            for(int i=0;i<Request.Files.Count;i++)
            {
                HttpPostedFileBase f = Request.Files[i];
                string nwame = f.FileName.ToString();
            }
            
        }

总结：以上三种form提交文件的方式均可用Request.Files接受;

二

非表单方式的提交

第一种(不能直接传递文件可以但是有解决办法FormData,传递对象需要转化为Json)

参考链接：http://www.cnblogs.com/tylerdonet/p/3520862.html

参考链接：http://www.cnblogs.com/MC-zhouyongli/p/4789620.html

 $.ajax({
        type: "post",
        url: "/From/SubmitForm",
        dataType: "json",
        data: { page: sumLoad, filt: filter },
        //async: false,//关闭异步
        success: function (data) {
            if (data.length > 0)
            {
                $("#ImageDiv").append('<h4 id="imagealert">图片正在加载中请稍等...</h4>')
            }
            $.each(data, function (key, value) {
                var img = new Image();
                img.src = value;
                img.onload = function () {
                    var size = img.width + 'x' + img.height;
                    console.log(size)
                    $("#ImageDiv").append('<div>' +
                    '<a  href=' +
                    '"' + value + '"' +
                    'data-size=' +
                    '"' + size + '"' +
                    '>' +
                    '<img class="WorkOrderimageOld" style="height:40px;width:40px;" src=' +
                     '"' + img.src + '"' +
                    '>' +
                    '</a>' +

                    '</div>' 
                    )
                };  
            }
            );
        },
        complete:function()
        {
           // $("#ImageDiv").text("图片已加载完成"); 
        },
        beforeSend: function () {
            //$("#ImageDiv").text("图片加载中");
        },
        error: function () {
           // $("#ImageDiv").text("图片加载异常");
        },
    });

C#

 public ActionResult WorkOrderJson(int page = 1, string filt="全部")
{
     ..........
  return Json(list, JsonRequestBehavior.AllowGet);
}

 

第二种(已传递文件为主,不能一次传递多个文件可以添加for循环模拟上传多个文件）

参考链接：http://www.cnblogs.com/snowinmay/archive/2013/07/17/3195072.html

 
function SaveImage()
{
           var Savefiles=document.getElementById("inputFile").files;
           var formData = new FormData();
            formData.append('file', Savefiles[n]);
            var oReq = new XMLHttpRequest();
            oReq.open("POST", "/WorkOrder/ImageUpload", false);//第三个参数用于控制同步异步  true为异步，false为同步
            oReq.onload = function (oEvent) {
                if (oReq.readyState == 4) {
                    if (oReq.status == 200 || oReq.status == 0) {
                        var result = oReq.responseText;
                        //var json = eval("(" + result + ")");
                        if(result=="OK")
                        {
                           Backinfo[m] = "OK";
                           $("#ImageDiv").text("第"+m+"张图片已上传");
                        }
                        
                    }
                }
            };
     oReq.send(formData);  
}

C#

public string  ImageUpload()
        {
            HttpPostedFileBase file = Request.Files[0];
            string Checkerror = CheckImg(file);//自定义检查文件类型以及大小等
            AppLog.Info("检查图片信息结果：" + Checkerror);
             if (Checkerror == "ok")
             {
                 return "OK";
             }
            else
             {
                 return "NO";
             }

        }

第三种jQuery File Upload-jQuery上传插件（查看资料功能比较强大但为用上）

实例地址：http://www.jq22.com/jquery-info230