Question

我一直在寻找一个jQuery（Ajax）代码，它可以将表单中的图像（当然还有其他输入）发布到第二个参数。

我也想让它逐一初始化数据。有没有解决我问题的解决方案？请帮助我。

Answer 1

要上传图片，您可以使用<input>标记，如下所示

<input id="fileInput" type="file" />

在脚本文件中使用以下代码

var formDatas = new FormData();
var uploadFile= $("#fileInput").get(0).files;

if(uploadFile.lenght > 0){
   formDatas.append("uploadFile",uploadFile[0]);
}

$.ajax({
        type: 'POST',
        url: '/Your_Controller_Name/Your_Action_Name',
        data:formDatas,
        dataType: "json",
        success: function (data) {
            alert("Success!");
        }
    });

在控制器中，您可以获得这样的图像

if ( System.Web.HttpContext.Current.Request.Files.AllKeys.Any())
{
   var picture =  System.Web.HttpContext.Current.Request.Files["uploadFile"];
}

Answer 2

最后我解决了这个问题。

我创建了一个普通表单，其中包含一些属性和图像文件：

1/11

我的控制器是：

        <h1 class="block-header">افزودن گروه</h1>
        <div class="separator"></div>


        <div class="block-standart">

            <div class="form inline">
                <fieldset>
                    <legend>Product</legend>





                    <div class="group">
                        @Html.LabelFor(model => model.Product.Name, new { @class = "label" })
                        <div class="controls">
                            @Html.TextBoxFor(model => model.Product.Name, new { @class = "text", id = "Name" })
                            @Html.ValidationMessageFor(model => model.Product.Name)
                        </div>
                    </div>







                    <div class="group">
                        @Html.LabelFor(model => model.Product.Description, new { @class = "label" })
                        <div class="controls">

                            @Html.TextBoxFor(model => model.Product.Description, new { @class = "text", id = "description" })
                            @Html.ValidationMessageFor(model => model.Product.Description)
                        </div>
                    </div>



                    <div class="group">
                        @Html.LabelFor(model => model.Product.Keyword, new { @class = "label" })
                        <div class="controls">
                            <div id="t">
                                @Html.TextBoxFor(model => model.Product.Keyword, new { @class = "text", id = "Keyword" })
                                @*<input type="text" name="tags" placeholder="Tags" class="tm-input" />*@
                                @*<input type="text" data-toggle="tags" id="s" />*@

                            </div>
                        </div>

                    </div>
                    <div class="group">
                        @Html.LabelFor(model => model.Product.Like, new { @class = "label" })
                        <div class="controls">

                            @Html.TextBoxFor(model => model.Product.Like, new { @class = "text" })
                            @Html.ValidationMessageFor(model => model.Product.Like)
                        </div>
                    </div>



                    <div class="group">
                        @Html.LabelFor(model => model.Product.DisLike, new { @class = "label" })
                        <div class="controls">

                            @Html.TextBoxFor(model => model.Product.DisLike, new { @class = "text" })
                            @Html.ValidationMessageFor(model => model.Product.DisLike)
                        </div>
                    </div>



                    <div class="group">
                        @Html.LabelFor(model => model.Product.URL, new { @class = "label" })
                        <div class="controls">

                            @Html.TextBoxFor(model => model.Product.URL, new { @class = "text" })
                            @Html.ValidationMessageFor(model => model.Product.URL)
                        </div>
                    </div>

                    <div class="group">
                        @Html.LabelFor(model => model.Product.Enable, new { @class = "label" })
                        <div class="controls">

                            @Html.CheckBoxFor(model => model.Product.Enable, new { @class = "text" })
                            @Html.ValidationMessageFor(model => model.Product.Enable)
                        </div>
                    </div>







                    <div class="group">
                        @Html.LabelFor(model => model.Product.Tags, new { @class = "label" })
                        <div class="controls">

                            @Html.TextBoxFor(model => model.Product.Tags, new { @class = "text", id = "tags" })
                        </div>
                    </div>



                    <div class="group">
                        @Html.LabelFor(model => model.Product.Image, new { @class = "label" })
                        <div class="controls">
                            <input type="file" id="UploadImage" name="UploadImage" />
                        </div>
                    </div>



                    <div class="group">
                        @Html.LabelFor(model => model.Product.Summery, new { @class = "label" })
                        <div class="controls">

                            @Html.TextAreaFor(model => model.Product.Summery, new { @class = "text", id = "txtSum" })
                            @Html.ValidationMessageFor(model => model.Product.Summery)
                        </div>
                    </div>



                    <div class="group">
                        @Html.LabelFor(model => model.Product.Price, new { @class = "label" })
                        <div class="controls">

                            @Html.TextBoxFor(model => model.Product.Price, new { @class = "text", id = "price" })
                            @Html.ValidationMessageFor(model => model.Product.Price)
                            <input type="text" id="gi" name="Product.GroupId" />
                        </div>
                    </div>

                    <p>
                        <input type="submit" value="Create" id="btnSabt" onclick="ExceptImage();" />
                    </p>
                    <textarea id="e">jg</textarea>
                </fieldset>
            </div>
        </div>
    </form>

我分两步发布数据：

1-i发布了除文件以外的所有数据。

2-i将文件作为单独的文件发布。

在步骤1中，我使用onclilck事件并使用了一个名为ExceptImage的函数。

在ExceptImage中的

我使用ajax发布除图像文件之外的所有数据：

          public ActionResult AddProduct(Product product, HttpPostedFileBase 
    UploadImage)
        {
            ProductRepository blProduct = new ProductRepository();
            if (ModelState.IsValid)
            {
                 product.Image = UploadImage.FileName;
            string path = Server.MapPath("~") + "Files\\UploadImages\\" + 
    UploadImage.FileName;
            UploadImage.InputStream.ResizeImageByWidth(500, path, 
 Utilty.ImageComperssion.Normal);

            if (blProduct.Add(product))
            {
                return MessageBox.Show("محصول با موفقیت ثبت شد", MessageType.Success);
            }
            else
            {
                System.IO.File.Delete(path);
                return MessageBox.Show("محصول ثبت نشد", MessageType.Error);
            }
        }
        else
        {
            //مقدار ورودی اشتباه
            return MessageBox.Show(ModelState.GetErrors(), MessageType.Warning);
        }
    }

在第2步中，我使用了表单提交事件（jQuery）并发布了文件：

 function ExceptImage(e) {

        e.preventDefault();
        $.ajax({
            url: "/Admin/AddProduct",
            type: "post",
            data: {
                Name: $("#Name").val(),
                Description: $("#description").val(),
                Keyword: $("#Keyword").val(),
                Like: $("#Product_Like").val(),
                DisLike: $("#Product_DisLike").val(),
                URL: $("#Product_URL").val(),
                Enable: $("#Product_Enable").val(),
                Summery: $("#txtSum").val(),
                Tags: $("#Product_Tags").val(),
                GroupId: $("#gi").val()
            }
        })
    }

如何将图像从表单发布到动作作为第二个参数？

2 个答案: