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

 

ASP.NET MVC 與Form表單互動