webapi后台获取表单提交的数据_webapi 后台控制器方法 根据url 获取数据 - CSDN
精华内容
参与话题
  • 通过Form表单提交web api中的文件

    千次阅读 2016-06-15 10:54:22
    5.3 发送HTML表单数据(2) 本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/2826230.html By Mike Wasson|June 21, 2012 作者:Mike Wasson | 日期:2012-6-21 Part 2: File Upload and Multipart...

    5.3 发送HTML表单数据(2)

    本文引自:http://www.cnblogs.com/r01cn/archive/2012/12/20/2826230.html

    By Mike Wasson|June 21, 2012
    作者:Mike Wasson | 日期:2012-6-21

    Part 2: File Upload and Multipart MIME
    第2部分:文件上传与多部分MIME

    This tutorial shows how to upload files to a web API. It also describes how to process multipart MIME data.
    本教程演示如何对Web API上传文件。也描述如何处理多部分MIME数据。

    Here is an example of an HTML form for uploading a file:
    以下是一个上传文件的HTML表单(如图5-8):

    <form name="form1" method="post" enctype="multipart/form-data" action="api/upload">
        <div>
            <label for="caption">Image Caption</label>
            <input name="caption" type="text" />
        </div>
        <div>
            <label for="image1">Image File</label>
            <input name="image1" type="file" />
        </div>
        <div>
            <input type="submit" value="Submit" />
        </div>
    </form>
    WebAPI5-8

    图5-8. 文件上传表单

    This form contains a text input control and a file input control. When a form contains a file input control, the enctype attribute should always be "multipart/form-data", which specifies that the form will be sent as a multipart MIME message.
    该表单有一个文本输入控件和一个文件输入控件。当表单含有文件输入控件时,其enctype标签属性应当总是“multipart/form-data”,它指示此表单将作为多部分MIME消息进行发送。

    The format of a multipart MIME message is easiest to understand by looking at an example request:
    通过考察一个示例请求,很容易理解multipart(多部分)MIME消息的格式:

    POST http://localhost:50460/api/values/1 HTTP/1.1
    User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:12.0) Gecko/20100101 Firefox/12.0
    Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
    Accept-Language: en-us,en;q=0.5
    Accept-Encoding: gzip, deflate
    Content-Type: multipart/form-data; boundary=---------------------------41184676334
    Content-Length: 29278
    
    -----------------------------41184676334
    Content-Disposition: form-data; name="caption"
    
    Summer vacation
    -----------------------------41184676334
    Content-Disposition: form-data; name="image1"; filename="GrandCanyon.jpg"
    Content-Type: image/jpeg
    
    (Binary data not shown)(二进制数据,未列出)
    -----------------------------41184676334--

    This message is divided into two parts, one for each form control. Part boundaries are indicated by the lines that start with dashes.
    这条消息分成两个部件parts),分别用于每个表单控件。部件边界由以一些破折号开始的行指示。

    The part boundary includes a random component ("41184676334") to ensure that the boundary string does not accidentally appear inside a message part.
    部件边界包含了一个随机组件(“41184676334”),以确保边界字符串不会偶然出现在消息部件之中。

    Each message part contains one or more headers, followed by the part contents.
    每一个消息部件含有一个或多个报头,后跟部件内容。

    • The Content-Disposition header includes the name of the control. For files, it also contains the file name.
      Content-Disposition(内容布置)报头包括控件名称。对于文件,它也包括文件名。
    • The Content-Type header describes the data in the part. If this header is omitted, the default is text/plain.
      Content-Type(内容类型)报头描述部件中的数据。如果该报头被忽略,默认为text/plain(文本格式)。

    In the previous example, the user uploaded a file named GrandCanyon.jpg, with content type image/jpeg; and the value of the text input was "Summer Vacation".
    在上一示例中,用户上传名为GrandCanyon.jpg的文件,其内容类型为image/jpeg,而文本输入框的值为“Summer Vacation”。

    File Upload
    文件上传

    Now let's look at a Web API controller that reads files from a multipart MIME message. The controller will read the files asynchronously. Web API supports asynchronous actions using the task-based programming model. First, here is the code if you are targeting .NET Framework 4.5, which supports the async and await keywords.
    现在,让我们考查从一个多部分MIME消息读取文件的控制器。该控制器将异步读取文件。Web API支持使用“基于任务的编程模型(这是关于.NET并行编程的MSDN文档 — 译者注)”的异步动作。首先,以下是针对.NET Framework 4.5的代码,它支持asyncawait关键字。

    using System.Diagnostics;
    using System.Net;
    using System.Net.Http;
    using System.Threading.Tasks;
    using System.Web;
    using System.Web.Http; 
    
    public class UploadController : ApiController
    {
        public async Task<HttpResponseMessage> PostFormData()
        {
            // Check if the request contains multipart/form-data.
            // 检查该请求是否含有multipart/form-data
            if (!Request.Content.IsMimeMultipartContent())
            {
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
            }
    
            string root = HttpContext.Current.Server.MapPath("~/App_Data");
            var provider = new MultipartFormDataStreamProvider(root); 
    
            try
            {
                // Read the form data.
                // 读取表单数据
                await Request.Content.ReadAsMultipartAsync(provider); 
    
                // This illustrates how to get the file names.
                // 以下描述如何获取文件名
                foreach (MultipartFileData file in provider.FileData)
                {
                    Trace.WriteLine(file.Headers.ContentDisposition.FileName);
                    Trace.WriteLine("Server file path: " + file.LocalFileName);
                }
                return Request.CreateResponse(HttpStatusCode.OK);
            }
            catch (System.Exception e)
            {
                return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
            }
        }
    }

    Notice that the controller action does not take any parameters. That's because we process the request body inside the action, without invoking a media-type formatter.
    注意,控制器动作不取任何参数。这是因为我们是在动作中处理请求体的,不必调用media-type格式化器。

    The IsMultipartContent method checks whether the request contains a multipart MIME message. If not, the controller returns HTTP status code 415 (Unsupported Media Type).
    IsMultipartContent方法检查该请求是否含有多部分MIME消息。如果不是,控制器返回HTTP状态码415(不支持的媒体类型)。

    The MultipartFormDataStreamProvider class is a helper object that allocates file streams for uploaded files. To read the multipart MIME message, call the ReadAsMultipartAsync method. This method extracts all of the message parts and writes them into the streams provided by the MultipartFormDataStreamProvider.
    MultipartFormDataStreamProvider类是一个辅助器对象,它为上传文件分配文件流。为了读取多部分MIME消息,需调用ReadAsMultipartAsync方法。该方法提取所有消息部件,并把它们写入由MultipartFormDataStreamProvider提供的流中。

    When the method completes, you can get information about the files from the FileData property, which is a collection of MultipartFileDataobjects.
    当该方法完成时,你可以通过FileData属性获得文件的信息,该属性是一个MultipartFileData对象的集合。

    • MultipartFileData.FileName is the local file name on the server, where the file was saved.
      MultipartFileData.FileName是保存此文件的服务器上的一个本地文件名。
    • MultipartFileData.Headers contains the part header (not the request header). You can use this to access the Content_Disposition and Content-Type headers.
      MultipartFileData.Headers含有部件报头(不是请求报头)。你可以用它来访问Content_Disposition和Content-Type报头。

    As the name suggests, ReadAsMultipartAsync is an asynchronous method. To perform work after the method completes, use a continuation task (.NET 4.0) or the await keyword (.NET 4.5).
    正如名称所暗示的那样,ReadAsMultipartAsync是一个异步方法。为了在该方法完成之后执行一些工作,需要使用“continuation(继续)任务”(.NET 4.0)或await关键字(.NET 4.5)。

    Here is the .NET Framework 4.0 version of the previous code:
    以下是前述代码的.NET Framework 4.0版本:

    public Task<HttpResponseMessage> PostFormData()
    {
        // Check if the request contains multipart/form-data.
        // 检查该请求是否含有multipart/form-data
        if (!Request.Content.IsMimeMultipartContent())
        {
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
        }
    
        string root = HttpContext.Current.Server.MapPath("~/App_Data");
        var provider = new MultipartFormDataStreamProvider(root); 
    
        // Read the form data and return an async task.
        // 读取表单数据,并返回一个async任务
        var task = Request.Content.ReadAsMultipartAsync(provider).
            ContinueWith<HttpResponseMessage>(t =>
            {
                if (t.IsFaulted || t.IsCanceled)
                {
                    Request.CreateErrorResponse(HttpStatusCode.InternalServerError, t.Exception);
                }
    
                // This illustrates how to get the file names.
                // 以下描述了如何获取文件名
                foreach (MultipartFileData file in provider.FileData)
                {
                    Trace.WriteLine(file.Headers.ContentDisposition.FileName);
                    Trace.WriteLine("Server file path: " + file.LocalFileName);
                }
                return Request.CreateResponse(HttpStatusCode.OK);
            });
    
        return task;
    }

    Reading Form Control Data
    读取表单控件数据

    The HTML form that I showed earlier had a text input control.
    前面显示的HTML表单有一个文本输入控件。

        <div>
            <label for="caption">Image Caption</label>
            <input name="caption" type="text" />
        </div>

    You can get the value of the control from the FormData property of the MultipartFormDataStreamProvider
    可以通过MultipartFormDataStreamProviderFormData属性获取控件的值。

    public async Task<HttpResponseMessage> PostFormData()
    {
        if (!Request.Content.IsMimeMultipartContent())
        {
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
        }
    
        string root = HttpContext.Current.Server.MapPath("~/App_Data");
        var provider = new MultipartFormDataStreamProvider(root); 
    
        try
        {
            await Request.Content.ReadAsMultipartAsync(provider); 
    
            // Show all the key-value pairs.
            // 显示所有“键-值”对
            foreach (var key in provider.FormData.AllKeys)
            {
                foreach (var val in provider.FormData.GetValues(key))
                {
                    Trace.WriteLine(string.Format("{0}: {1}", key, val));
                }
            }
    
            return Request.CreateResponse(HttpStatusCode.OK);
        }
        catch (System.Exception e)
        {
            return Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
        }
    }

    FormData is a NameValueCollection that contains name/value pairs for the form controls. The collection can contain duplicate keys. Consider this form:
    FormData是一个NameValueCollection(名字/值集合),它含有表单控件的“名字/值”对。该集合可能含有重复键。考虑以下表单(如图5-9):

    <form name="trip_search" method="post" enctype="multipart/form-data" action="api/upload">
        <div>
            <input type="radio" name="trip" value="round-trip"/>
            Round-Trip
        </div>
        <div>
            <input type="radio" name="trip" value="one-way"/>
            One-Way
        </div> 
    
        <div>
            <input type="checkbox" name="options" value="nonstop" />
            Only show non-stop flights
        </div>
        <div>
            <input type="checkbox" name="options" value="airports" />
            Compare nearby airports
        </div>
        <div>
            <input type="checkbox" name="options" value="dates" />
            My travel dates are flexible
        </div> 
    
        <div>
            <label for="seat">Seating Preference</label>
            <select name="seat">
                <option value="aisle">Aisle</option>
                <option value="window">Window</option>
                <option value="center">Center</option>
                <option value="none">No Preference</option>
            </select>
        </div>
    </form>
    WebAPI5-9

    图5-9. 有重复键的表单

    The request body might look like this:
    该请求体看上去可能像这样:

    -----------------------------7dc1d13623304d6
    Content-Disposition: form-data; name="trip"
    
    round-trip
    -----------------------------7dc1d13623304d6
    Content-Disposition: form-data; name="options"
    
    nonstop
    -----------------------------7dc1d13623304d6
    Content-Disposition: form-data; name="options"
    
    dates
    -----------------------------7dc1d13623304d6
    Content-Disposition: form-data; name="seat"
    
    window
    -----------------------------7dc1d13623304d6--

    In that case, the FormData collection would contain the following key/value pairs:
    在这种情况下,FormData集合会含有以下“键/值”对:

      • trip: round-trip
      • options: nonstop
      • options: dates
      • seat: window
    展开全文
  • c#后台如何接收 我需要获取这个控件选择的文件的路径 _前端_ ``` 上传 下载 ``` _js_ ``` $(document).ready(function () { $("#btnUpLoad").click(function () { $.ajax({ url: "Handler3.ashx...
  • WebAPI+Form表单上传文件

    千次阅读 2018-03-21 14:34:20
    上传的时候还是遇到一些问题的,在文章开头罗列一下,希望帮到跟我遇到同样问题的人问题一:GET 请求与POST请求 起初我使用的是GET 请求,发现不行,后改为了POST,具体原因尚不明确,不过一般向服务器发送数据还是...

    上传的时候还是遇到一些问题的,在文章开头罗列一下,希望帮到跟我遇到同样问题的人

    问题一:GET 请求与POST请求

          起初我使用的是GET 请求,发现不行,后改为了POST,具体原因尚不明确,不过一般向服务器发送数据还是用POST吧,后来发现网上有使用GET方式上传文件的,但是貌似不多。

    问题二:FROM 表单中没有加 enctype="multipart/form-data" 属性

          上网查了下资料 :enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。解释如下表:

    描述
    application/x-www-form-urlencoded在发送前编码所有字符(默认)
    multipart/form-data

    不对字符编码。

    在使用包含文件上传控件的表单时,必须使用该值。

    text/plain空格转换为 "+" 加号,但不对特殊字符编码。

    问题三:input 表单控件没有添加  name 属性  

           没添加name属性,后台就不认识了?这个没花时间去查,暂时放一下。

    下面直接贴代码了,首先是前端代码部分

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="jquery1.9.1.js" ></script>
    	</head>
    	<body>
    		<form  enctype="multipart/form-data" action="http://localhost:42031/api/home/AddTableByDT" method="post">
    			<input name="file" type="file" />
    			<input type="submit" />
    		</form>
    	</body>
    </html>

    前端代码没啥好说的,下面是后端代码

            [HttpPost]
            public void AddTableByDapper()
            {
                try
                {
                    System.Web.HttpFileCollection file = System.Web.HttpContext.Current.Request.Files;
                    if (file.Count > 0)
                    {
                        //文件名  
                        string name = file[0].FileName;
                        //保存文件  
                        string path = HttpContext.Current.Server.MapPath("~/UpLoad/") + name;
                        file[0].SaveAs(path);
                    }
                }
                catch (Exception ex)
                {
                    throw ex;
                }
            }

            对于后端代码,我有话要说,在调试过程中,我们可以看到文件中的一些属性


    ContentLength :是该文件的大小(以字节计)

    ContentType : 文件类型

    FileName :文件名

    如果你打算本地进行调试,那么先解决跨域问题,跨域问题网上的办法很多,我就不在累述了。

            一般上传文件后,我们要对文件的类型和大小进行限制,并对该文件进行重命名,有了这三个属性后,都可以完成了,本来打算封装一个方法的,可是我实在太懒了,就先这样吧。敲代码眼睛这么酸涩,看看图休息一下吧,以后有机会再来上传demo

            






    展开全文
  • Web Api简单使用方法

    千次阅读 2018-04-07 14:54:41
    1. 简单介绍什么是Web ApiREST属于一种设计风格,REST 中的 POST(新增数据),GET(取得数据),PUT(更新数据),DELETE(删除数据)来进行数据库的增删改查,而如果开发人员的应用程式符合REST原则,则它的服务为...

    1. 简单介绍什么是Web Api

    REST属于一种设计风格,REST 中的 POST(新增数据),GET(取得数据),PUT(更新数据),DELETE(删除数据)来进行数据库的增删改查,而如果开发人员的应用程式符合REST原则,则它的服务为“REST风格Web服务也称的RESRfulWeb API”

    微软的web api是在vs2012上的mvc4项目绑定发行的,它提出的web api是完全基于RESTful标准的,完全不同于之前的(同是SOAP协议的)wcf和webService,它是简单,代码可读性强的,上手快的,如果要拿它和web服务相比,我会说,它的接口更标准,更清晰,没有混乱的方法名称,有的只有几种标准的请求,如get,post,put,delete等,它们分别对应的几个操作,下面讲一下:

    GET:生到数据列表(默认),或者得到一条实体数据

    POST:添加服务端添加一条记录,记录实体为Form对象

    PUT:添加或修改服务端的一条记录,记录实体的Form对象,记录主键以GET方式进行传输

    DELETE:删除 服务端的一条记录

    2. 怎么理解的 Post Get Put 和Delete

    首先我们从MVC4WEBAPI模板自动创建的演示文件进行分析 


    从演示的列子,我们可以看到在Action 中没有使用[HttpGet]、[HttpPost] 等修饰,那究竟它是如何运作的呢

    Action 皆以HTTP 动词开头Get、Post、Put、Delete ,这个也是刚好符合 webapi的约定的,什么约定呢?

    你调用什么类型的方法 ,例如 post 方法,那么他就去 你的所有的 action 里面 去找 以 post 开头的方法 ,名字可以随便叫,例如 postToDataBase 等等,只要开头匹配 就可以了

    打个比喻,假设今天服务端收到了一个GET 请求时,会去查找对应的Controller 并且Action 以”Get…” 开头的方法,举个例子:GetMembers、GetTime,以此类推,如果我们从jQueryAjax 发出了一个POST 请求,也会自动对应到以”Post…”开头的Action 内,也就是说实际呼叫哪个Controller的Action 不是利用网址来决定,而是依照HTTP 所送出的请求来决定,这也就是非常典型的REST风格,而在Web API中也处理了回传的数据,让我们看看Get() 这个方法,回传IEnumerable的方法,等于我们拥有了强类型。

    我们再来看看默认的 api 路由表 


    这里,只注册到了controller,没有到action,因为api的action名称是有约定的。

    webapi大约有这样的约定:

    action名称中有get的,0参数,匹配路由到/控制器

    action名称中有get的,1参数,匹配路由到 /控制器/id

    action名称中有post的,0参数,匹配路由到post方式的/控制器

    action名称中有post的,1参数,匹配路由到post方式的/控制器/id

     对于返回,可以直接返回一个class,则apicontroller自动根据请求的content-type序列化成xml或者json。具体例子为,用ie打开相应api的url返回的是json,用chrome返回的就是xml。

     

    另外我们可以注意到在PostPut的方法参数有一个关键字[ FromBody ],而Get、Delete则没有。,事实上没有加[FromBody ]就默认为[FromUri ].

    [ FromBody ]表示由请求文件本体中取得资料,就像一般表单Post Submit一样,取得资料的来源是由请求本体中取得,而[ FromUri ]则表示由URI中取得资料,就像在网址列中的所夹带的参数

    在webapi的示范代码里,Get方法很简单只有一个id参数的传入并且是简单的int型,因此我们可以用http://localhost/api/Values/1 这样的请求执行Get(int id)方法,但事实上并非每个请求都只用一个简单的参数就可以能搞定,有时我们可能需要2个或以上的参数才能传递或者是获取到数据,我们可以到路由里面改为接受两个参数,分别为{ p1 } & { p2 }

    RouteTable.Routes.MapHttpRoute(

                name: "DefaultApi",

                routeTemplate: "webapi/{controller}/{p1}/{p2}",

                defaults: new { id =System.Web.Http.RouteParameter.Optional }

            );

    那么对应的Controller 里面获取Get的方法需要修改为

    publicstringGet(String p1, String p2)

            {

                return p1 + "/" + p2;

            }

    这种方法,虽然比较简单,但是如果我们的参数更多的时候,还是这样去修改路由也是很麻烦的,我们就采用下面的方法,直接传递类到后台

     

    3. 复杂传值,直接从前台传递一个类到后台接收

     我们先在前台页面,post方式,来传递一个类的2个值到后台

    我们在前台提交的页面设置方式为 post 提交 ,地址就指向我们的 webapi地址 

    定义一个简单的类

    由于我们是通过 Post方式提交的数据,那么后台接收的时候,就是用 FromBody 来进行接收,由于刚好我们传递的前台数据就是类的2个字段,那么后台接收的时候,也可以直接用类来接收,webapi会根据类型和字段来帮我们自动加载数据,获取到值.

    如果你这里是用 get 方式进行传值的,那么这里的 FromBody 就应该换成 FromUri 

    get方式来获取数据:

    我直接在前台,用一个超链接,里面指向我们的webapi 并且传递2个值,刚好是我们的UserInfo类的2个属性 

    即使我们传了一个不存在型别里的属性名称参数值,也不会引发错误,该参数只会被忽略掉

    例如,我们修改的例子,post提交的时候,我们新增加一个参数,这个参数在后台的 Userinfo类里面是没有对应的属性的,我们这样提交之后,后台接收到值,会自动忽略掉不在类属性里面的值

     

    最传统通过 request.form request.querystring 的方式的获取值

    我们传统的在aspx或者是一般处理程序里面获取值是通过request.querystringrequest.form来获取到.那么在 webapi里面,则是有些改变


     可以通过上面这种强转的方式获取,也可以直接

    var context =HttpContext.Current.Request;

    WEBAPI中的RequestHttpRequestMessage类型,不能像Web传统那样有querystringfrom 方法接收参数,而传统的HttpReqest的基类是HttpReqestBase.所以这里我们就直接使用(HttpContextBase)Request.Properties[“MS_HttpContext”]

     

    4. 前台调用,ajax来调用

    5. 后台调用,后台代码调用

    如果我们想不用Get/Post/Put/Delete ,怎么定义 ? 简单,我们自己在方法上打上接受动词标签 HttpPost HttpGet

    我们想通过get方法来调用其中一个方法 http://localhost:28160/api/xiaoxin/RequestToken

     

    这个时候就会直接报错请求的资源不支持 http 方法“GET” 

    再次调用其中的一个方法,并且传递参数过去

    http://localhost:28160/api/xiaoxin/AccessToken?name=joey&pwd=lee

    居然直接就报错了,提示 : 找到了与该请求匹配的多个操作 

    这里报错的坑爹原因是: 你以为你刚才那样写 url 是在调用AccessToken方法? 你太天真了,都说了, 我们的webapi是只绑定到 controller ,而不绑定到 action上的,调用什么方法,完全看你是用的 post 还是get方法,并且是根据action的名字里面有没有 post get 来匹配action ,我这里使用url的方式显然是get方法, 然后AccessToken?name=joey&pwd=lee 这么一大串,在路由里面实际就是代表了参数id, 当匹配到 controller 里面的时候,发现有2个 HttpGet 的方法, 但是 这2个方法,他们的参数名字都是一模一样的,所以就提示了, 找到了与该请求匹配的多个操作….那么如何修改呢? 

    展开全文
  • 一、引言  小编目前工作内容属于和第三方做接口对接,突然调换到开发产品组,需要做一个拍照上传身份证照片到后台识别的功能。一个很简单的功能,当我做到需要上传... 1、使用form表单提交     这种方式是...

    一、引言

        小编目前工作内容属于和第三方做接口对接,突然调换到开发产品组,需要做一个拍照上传身份证照片到后台识别的功能。一个很简单的功能,当我做到需要上传图片到后台的时候,突然感觉对上传文件的思路很乱,不知该使用什么方式来实现。所以今天小编我来总结上传文件的几种方式,屡屡自己的思路。   

    二、常用的几种方式

        1、使用form表单提交    

     

            这种方式是最简单明了的,直接用表单提交。记得添加enctype属性哟,这个属性是指定form表单在向服务器提交之前,对表单数据如何进行编码。 文件域中的name="file"属性的值,需要和后台接收的对象名一致,不然接收不到的。

    <form action="/api/fileupload/dome1" id="domeform" method="post" enctype="multipart/form-data">
        <input type="file" name="file" value="选择文件">
        <input type="submit" value="表单提交">
        <input type="button" value="ajax提交" id="ajaxsub">
        <input type="button" value="formdata提交" id="ormdatasub">
    </form>

        2、使用ajax提交文件

            在项目当中难免避免异步提交文件,或者是需要局部刷新,这个时候我们就需要使用到ajax来实现。

            使用ajax提交首先引入jquery-form.js文件才能实现,接着使用上面的html代码,加入以js则可以实现ajax提交文件        

    <script type="text/javascript">
        $(function(){
           $("#ajaxsub").click(function(){
                $("#domeform").ajaxSubmit({
                    url: "/api/fileupload/dome1",
                    type: "POST",
                    dataType: "json",
                    success: function (res) {
                        //处理成功后的业务逻辑
                    }
                })
            })
        })
    </script>

        3、使用FormData对象

           如果不想引入其他js文件,那就使用这种方式吧,也是通过ajax的形式上传。

    /**
     * 使用FormData
     */
    $("#ormdatasub").click(function(){
        var formdata = new FormData($("#domeform")[0]);
        $.ajax({
            url: "/api/fileupload/dome1",
            type: "POST",
            data:formdata,
            dataType: "json",
            processData: false,  // 告诉jQuery不要去处理发送的数据
            contentType: false,   // 告诉jQuery不要去设置Content-Type请求头
            success: function (res) {
            }
        })
    }) 

     

        4、后台接收文件,框架采用的Spring Boot框架,因为该框架搭建很方便所以采用这个框架写例子。

    package com.example.demo;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    import org.springframework.web.multipart.MultipartFile;
    
    import javax.servlet.http.HttpServletRequest;
    
    @Controller
    @RequestMapping(value = "/api/fileupload")
    public class FileuploadController {
    
    
        /**
         * 用于接收前端上传文件
         * @param request
         * @param file
         */
        @RequestMapping(value = "dome1", method = RequestMethod.POST)
        public void dome1(HttpServletRequest request, MultipartFile file) throws Exception{
            //file对象名记得和前端name属性值一致
            System.out.println(file.getOriginalFilename());
        }
    }

    有需要整个dome的点击这里进行下载,后期遇到常用的上传文件的方式,也会即使更新。

    展开全文
  • Mvc4中的WebApi的使用方式

    千次阅读 2017-05-10 16:20:35
    一:简单介绍什么是Web apiREST属于一种设计风格,REST 中的 POST(新增数据),GET(取得数据),PUT(更新数据),DELETE(删除数据)来进行数据库的增删改查,而如果开发人员的应用程式符合REST原则,则它的服务为...
  • mvc4中的 webapi 的使用方式

    千次阅读 2015-07-19 19:12:04
    目录 一:简单介绍什么是Web api 二:怎么定义的 Post Get Put 和 Delete ...REST属于一种设计风格,REST 中的 POST(新增数据),GET(取得数据),PUT(更新数据),DELETE(删除数据)来进行数据库的增删改查,
  • .Net WebAPI FormData 上传文件实现

    千次阅读 2018-12-03 16:45:41
    &lt;form id="form1" runat="...http://localhost:2951/api/TechShare/PostFormData" enctype="multipart/form-data"&gt; &lt;div&gt; &l
  • 这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urlencoded 方式提交数据。    curl 测试接口地址是否通不通,这个命令和...
  • web api 中get和post一些经验总结

    千次阅读 2016-06-16 09:57:44
    百度提示 常用的web api场景是一个接口多平台调用,例如给安卓调用 给ios调用 给平板调用 主要为移动互联网提供服务, web api虽然可以脱离iis自寄宿 但目前大多还是托管在IIS上的 ...件夹下面有个WebApi
  • 该演示需要用到 1 : json.jar(下载)  2 : jquery.js(下载) 流程演示:1.点击“登录”按钮,传参到后台  2.后台获取数据,处理分析数据,利用JSONObject返回结果(JSONObject需要用到一个 json.jar 即可)
  • 最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法。 前台主要的contenttype为下面三种: multipart/form-data类型主要是上传文件时...
  • 防止表单重复提交(只通过后台实现)

    千次阅读 热门讨论 2019-03-26 18:15:18
    1.背景与介绍: ...这些情况都会导致表单重复提交,造成数据重复,增加服务器负载,严重甚至会造成服务器宕机。因此有效防止表单重复提交有一定的必要性。 使用AOP自定义切入实现 实现原理: ...
  • web后台数据交互的方式

    万次阅读 2012-05-25 15:41:23
    web开发,很重要的一个环节就是前后台数据的交互,数据从页面提交到contoller层,数据从controler层传送到jsp页面来显示。这2个过程中数据具体是如何来传送的,是本节讲解的内容。  首先说一下数据如何从后台...
  • MVC调用webapi实体为null

    2017-08-18 00:25:07
    在使用MVC提交表单webapi的时候,表单绑定的实体在webapi中为null 代码如下 前台 $(document).ready(function () { $("#btnAdd").click(function () { var form = document.getElementById("formMain"); var ...
  • byte[] byts = new byte[System.Web.HttpContext.Current.Request.InputStream.Length]; System.Web.HttpContext.Current.Request.InputStream.Read(byts, 0, byts.Length); string ...
  • 终于知道怎么在c#后台发post请求了

    万次阅读 2018-06-20 16:32:05
    C#进阶系列——WebApi 接口参数不再困惑:传参详解阅读目录一、get请求1、基础类型参数2、实体作为参数3、数组作为参数4、“怪异”的get请求二、post请求1、基础类型参数2、实体作为参数3、数组作为参数4、后台发送...
  • 在学习Servlet文件上传方面遇到了一个问题,就是通过multipart/form-data这个表单类型提交要上传的文件的时候,Servlet用request.getParameter()方法获取非文件的数据时发现为空。 具体如下 jsp页面 &lt;...
  • Servlet3.0标准之后,Java Web文件...表单提交请求,表单中的文件可以通过request.getPart()方法获取。 下面来介绍获取文件的具体使用方法: (1)在servlet类上添加AMultipartConfig注解 (2)通过HttpServletReque
  • 问题的起因是现在做的一个WEB API项目中需要以formdata的方式向后台提交数据(包括一个JSON和一张图片)。 之前一直是用以下代码发送数据,没出过问题。 if (window.XMLHttpRequest) { // Mozilla 浏览器 //新建...
1 2 3 4 5 ... 20
收藏数 13,934
精华内容 5,573
关键字:

webapi后台获取表单提交的数据