ASP.NET MVC 與Form表單交互

時間 2019-11-19

標籤 asp.net asp mvc form 表單交互欄目 ASP 简体版

原文原文鏈接

一,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#html

[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#jquery

 [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#ajax

  [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接受;json

二

非表單方式的提交

第一種(不能直接傳遞文件能夠可是有解決辦法FormData,傳遞對象須要轉化爲Json)

參考連接：http://www.cnblogs.com/tylerdonet/p/3520862.htmlapp

參考連接：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#async

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

第二種(已傳遞文件爲主,不能一次傳遞多個文件能夠添加for循環模擬上傳多個文件）

參考連接：http://www.cnblogs.com/snowinmay/archive/2013/07/17/3195072.htmlpost

 
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#ui

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

        }