第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

如何使用AJAX JQuery ASP .NET MVC 4將表單集合和文件傳遞到控制器

如何使用AJAX JQuery ASP .NET MVC 4將表單集合和文件傳遞到控制器

C#
料青山看我應(yīng)如是 2022-08-20 17:28:04
我有一個(gè)模型類：public class Register{    public Employee Employee { get; set; }    public Business Business { get; set; }}我有一個(gè)HTML表單，其中包含輸入類型文本，其中包含來自模型的員工和業(yè)務(wù)數(shù)據(jù)以及用于加載圖像的輸入類型文件：@using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "frmRegister", @enctype = "multipart/form-data" })){   @Html.AntiForgeryToken()   <div class="div-file">      <input id="inputFile" title="Upload a business image" type="file" name="UploadedFile" accept="image/*" />   </div>   <div class="div-input">     @Html.Label("Name:", htmlAttributes: new { @for = "txtName" })     @Html.EditorFor(model => model.Employee.Name, new { htmlAttributes = new { @class = "form-control", @id = "txtName" } })   </div>   <div class="div-input">     @Html.Label("Age:", htmlAttributes: new { @for = "txtAge" })     @Html.EditorFor(model => model.Employee.Age, new { htmlAttributes = new { @class = "form-control", @id = "txtAge" } })   </div>   <div class="div-input">      @Html.Label("Company:", htmlAttributes: new { @for = "txtCompany" })      @Html.EditorFor(model => model.Business.Name, new { htmlAttributes = new { @class = "form-control", @id = "txtName" } })  </div>  <div class="div-input">       @Html.Label("Phone:", htmlAttributes: new { @for = "txtPhone" })       @Html.EditorFor(model => model.Business.Phone, new { htmlAttributes = new { @class = "form-control", @id = "txtPhone" } })  </div>  <div class="text-center">     <input type="button" id="btnRegister" value="Register" class="btn btn-default" />   </div>}問題是：如何傳遞圖像文件？
查看完整描述

2 回答

?
神不在的星期二

TA貢獻(xiàn)1963條經(jīng)驗(yàn) 獲得超6個(gè)贊

顯然，唯一的解決方案是將以字符串編碼轉(zhuǎn)換的圖像傳遞到 base 64：


網(wǎng)頁：


@using (Html.BeginForm(null, null, FormMethod.Post, new { @id = "frmRegister", @enctype = "multipart/form-data" }))

{

   @Html.AntiForgeryToken()

   <div class="div-file">

      <input id="inputFile" title="Upload a business image" type="file" name="UploadedFile" accept="image/*" onchange="encodeImagetoBase64(this)"/>

   </div>

    <div>

        <p id="pImageBase64"></p>

    </div>

    <div>

        <img id="image" height="150">

    </div>

   <div class="div-input">

     @Html.Label("Name:", htmlAttributes: new { @for = "txtName" })

     @Html.EditorFor(model => model.Employee.Name, new { htmlAttributes = new { @class = "form-control", @id = "txtName" } })

   </div>

   <div class="div-input">

     @Html.Label("Age:", htmlAttributes: new { @for = "txtAge" })

     @Html.EditorFor(model => model.Employee.Age, new { htmlAttributes = new { @class = "form-control", @id = "txtAge" } })

   </div>

   <div class="div-input">

      @Html.Label("Company:", htmlAttributes: new { @for = "txtCompany" })

      @Html.EditorFor(model => model.Business.Name, new { htmlAttributes = new { @class = "form-control", @id = "txtName" } })

  </div>

  <div class="div-input">

       @Html.Label("Phone:", htmlAttributes: new { @for = "txtPhone" })

       @Html.EditorFor(model => model.Business.Phone, new { htmlAttributes = new { @class = "form-control", @id = "txtPhone" } })

  </div>

  <div class="text-center">

     <input type="button" id="btnRegister" value="Register" class="btn btn-default" />

   </div>

}

腳本：


@section Scripts {

    <script type="text/javascript" language="javascript">

        $(document).ready(function () {

            $("#btnRegister").on('click', function (e) {

                e.preventDefault();

                var imagenBase64 = $("#pImageBase64").html();

                var name = $("#txtName").val();

                var age= $("#txtAge").val();

                var params = {

                    file: imagenBase64,

                    name: name,

                    age: age

                }

                 $.ajax({

                    url: '@Url.Action("Create", "Register")',

                    type: 'POST',

                     traditional: true,

                     data: params,

                     dataType: 'json',

                     ContentType: "application/json;utf-8",

                     cache: false,

                     success: function (response) {


                     },

                      error: function (response) {

                         alert(response.responseText);

                     }

                });

            });

        });

        function encodeImagetoBase64(element) {

            var file = element.files[0];

            var reader = new FileReader();

            reader.onloadend = function () {

                $("#image").attr("src", reader.result);

                $("#pImageBase64").html(reader.result);


            }

            reader.readAsDataURL(file);

        }

    </script>

}

控制器：


public ActionResult Create(string file, string name, string age)

{

  return Json("success!!!");

}


查看完整回答
反對(duì) 回復(fù) 2022-08-20
?
qq_遁去的一_1

TA貢獻(xiàn)1725條經(jīng)驗(yàn) 獲得超8個(gè)贊

請(qǐng)這樣做，嘗試使用表單集合：


@section Scripts {

    <script type="text/javascript" language="javascript">

        $(document).ready(function () {

            $("#btnRegister").on('click', function (e) {

                e.preventDefault();

                var image = document.getElementById("inputFile").files[0];

                var frmRegister = $("#frmRegister").serialize();


                var formData = new FormData();

                formData.append("imageFile", image );

                formData.append("RegisterData", frmRegister);

                 $.ajax({

                    url: '@Url.Action("Create", "Register")',

                    type: 'POST',

                     traditional: true,

                     data: formData,

                     processData: false,

                     dataType: 'json',

                     ContentType: false,

                     cache: false,

                     success: function (response) {


                     },

                      error: function (response) {

                         alert(response.responseText);

                     }

                });

            });

        });

    </script>

}

和改變行動(dòng)方法根據(jù)這個(gè)：


[HttpPost]

        public ActionResult Create()

        {

            string serializedRegisterData = Request["RegisterData"]; //you can do code of deserialization for form data.


            var image= Request.Files[0];

            var imagePath = Path.GetFileName(image.FileName);


            return Json("");

        }


查看完整回答
反對(duì) 回復(fù) 2022-08-20
  • 2 回答
  • 0 關(guān)注
  • 136 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)