如何使用jQuery提交带有文件的数据 [英] How to submit data with file using jQuery

问题描述

你好开发者。



我遇到了我想用

一些其他参数上传文件的情况。



我的模特课是：

  public   class  Banner 
 {
 [必需（ErrorMessage =   Banner Title required，AllowEmptyStrings =  false ）] 
  public   String 标题{ get ;  set ; } 
 [必需（ErrorMessage =  需要图像，AllowEmptyStrings =  false ）] 
  public  HttpPostedFileBase ImageUpload { get ;  set ; } 
  public  字符串 H2 { get ;  set ; } 
} 

我的网络api方法如下：

 [HttpPost] 
  public  HttpResponseMessage UploadBanner（Admin.Models.Banner banner）
 {
  if （ModelState.IsValid）
 {
  return  Request.CreateResponse（ HttpStatusCode.OK， 已成功上传）; 
} 
  else  
 {
  return 请求。 CreateErrorResponse（HttpStatusCode.BadRequest， 找不到元素）; 
} 
} 

我的HTML是：

< form id =frmbannername =frmbannermethod =postenctype =multipart / form-dataaction =api / Webapi> 
 @ Html.TextBoxFor（model => model.ImageUpload，new {type =file，id =ImageUpload，name =ImageUpload，@ class =default}）
<峰; br /> 
 @ Html.TextBoxFor（model => model.Title，new {id =Title，name =Title，@ class =m-wrap span12}）
< br / > 
 @ Html.TextBoxFor（model => model.H2，new {id =H2，name =H2，@ class =m-wrap span12}）
< br / > 
< button type =submitid =btnSubmitclass =btn blue>< i class =icon-ok>< / i>保存和LT; /按钮> 
< / form> 

来自jQuery我使用这种方法来调用web api

 $（'＃btnSubmit'）。click（function（e）{
 e.preventDefault（）; 
 var banner = {
标题：$（'#Title'）。val（），
 H2：$（'＃H2'）。val（），
 ImageUpload：$（'＃ImageUpload'）[0] .files [0] 
}; 
 
 $ .ajax（{
类型：POST，
 url：@ Url.Action（UploadBanner， api / Webapi），
数据：JSON.stringify（banner），
 contentType：application / json; charset = utf-8，
 dataType：json，
成功：函数（响应）{
 //成功后代码
 
}，
失败：函数（响应）{
 alert（response.d） ; 
} 
}）; 
}）; 

它传递字符串数据但是没有传递上传的文件，我正在上传图片文件在这里。



请各位帮我这样做。我想使用ajax调用上传带有其他参数的文件。



提前谢谢...

解决方案

< blockquote>（'＃btnSubmit'）。click（function（e）{
e.preventDefault（）;
var banner = {
Title：

（'#Title'）。val（），
H2：

（'＃H2'）。val（），
ImageUpload：

Hello developers.

I come into the situation where I want to upload file with
some other parameters.

My model class is :

public class Banner
    {
        [Required(ErrorMessage = "Banner Title required", AllowEmptyStrings = false)]
        public String Title { get; set; }
        [Required(ErrorMessage = "Image required", AllowEmptyStrings = false)]
        public HttpPostedFileBase ImageUpload { get; set; }
        public String H2 { get; set; }
    }

My web api method is as below :

[HttpPost]
        public HttpResponseMessage UploadBanner(Admin.Models.Banner banner)
        {
            if (ModelState.IsValid)
            {
                return Request.CreateResponse(HttpStatusCode.OK, "Successfully uploaded");
            }
            else
            {
                return Request.CreateErrorResponse(HttpStatusCode.BadRequest, "No elements found");
            }
        }

My HTML is :

<form id="frmbanner" name="frmbanner" method="post" enctype="multipart/form-data" action="api/Webapi">
 @Html.TextBoxFor(model => model.ImageUpload, new { type = "file", id = "ImageUpload", name = "ImageUpload", @class = "default" })
<br/>
 @Html.TextBoxFor(model => model.Title, new { id = "Title", name = "Title", @class = "m-wrap span12" })
<br/>
@Html.TextBoxFor(model => model.H2, new { id = "H2", name = "H2", @class = "m-wrap span12" })
<br/>
<button type="submit" id="btnSubmit" class="btn blue"><i class="icon-ok"></i> Save</button>
</form>

From jQuery I am using this method to call web api

$('#btnSubmit').click(function (e) {
 e.preventDefault();
var banner = {
                Title: $('#Title').val(),
                H2: $('#H2').val(),
                ImageUpload: $('#ImageUpload')[0].files[0]
            };

	$.ajax({
        type: "POST",
        url: "@Url.Action("UploadBanner", "api/Webapi")",
        data: JSON.stringify(banner),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
                    //code after success

                },
        failure: function(response) {
            alert(response.d);
        }
    });
 });

It passes the string data but its not passing file uploaded, I am uploading image file here.

Please guys help me to do this. I want to upload file with other parameters using ajax call.

Thank you in advance...

解决方案

('#btnSubmit').click(function (e) { e.preventDefault(); var banner = { Title:

('#Title').val(), H2:

('#H2').val(), ImageUpload:

这篇关于如何使用jQuery提交带有文件的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！