`

form序列化时向后台传递file文件

 
阅读更多

1、form中,有文件上传输入,

<form action="/task/xxxController" enctype="multipart/form-data" id="mainForm" method="post" >

<input id="FileUpload" type="file" name="files" />

</form>

2、如此上传文件后,使用$("#mainForm").submit(); 提交后,在后台Controller中获取文件即可,

获取方式为:

HttpPostedFileBase file = Request.Files["files"];

其中,[]中为input的名字。

3、后期,为了在提交form时做其他处理,将提交方式修改为下面这种方式:

$.ajax({

                                cache: true,

                                type: "POST",

                                url:"/task/xxxController",

                                data:$('#mainForm').serialize(),

                                async: false,

                                error: function(request) {

                                    alert("工单保存错误!");

                                },

                                success: function(data) {

                                    /alert("form 提交成功!");

                           }

                    });

修改后发现,在后台中,无法获得文件了,即$('#mainForm').serialize(),无法序列化文件。

 

4、最后,为了能够序列化文件将之传递到后台,使用如下方式处理:

var formData = new FormData($("#mainForm")[0]);

                            $.ajax({

                                cache: true,

                                type: "POST",

                               url:"/task/xxxController",

                                data: formData,

                                async: false,

                                contentType: false,

                                processData: false,

                                error: function (request) {

                                    alert("工单保存错误!");

                                },

                                success: function (data) {

                                    alert("form 提交成功!");

                                }

 

                            });

使用FormData的方式序列化form,可以将之传递到后台,另外,processData需要设置。

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    c#post multipart/form-data和JSON数据

    在C#中,可以使用Newtonsoft.Json库(通常称为Json.NET)来序列化和反序列化JSON数据。发送JSON数据的POST请求可以这样实现: ```csharp using Newtonsoft.Json; using System.Net.Http; var client = new ...

    ajax使用formdata上传文件流

    今天在做项目的时候涉及到了ajax上传文件流的问题,由于是移动端两个页面的两个表单使用同一个ajax地址进行上传数据给后台,数据中涉及到了不同类型的input,其中存在了file类型的input,导致无法使用表单序列化直接...

    js表单处理中单选、多选、选择框值的获取及表单的序列化

    同时,序列化功能也是Ajax请求中常见的需求,可以将表单数据以标准格式传递给后台。需要注意的是,对于IE浏览器与非IE浏览器的兼容性问题,开发者需要特别注意,因为不同的浏览器可能有不同的API实现。

    简单了解Ajax表单序列化的实现方法

    当使用原生Ajax(非jQuery等库)以POST方式提交数据时,必须先序列化表单数据,以便正确地传递给后台。 在HTML表单中,表单元素如文本输入、复选框、单选按钮、选择列表等,都有各自的name和value属性。在表单提交...

    Android客户端与服务器端的json数据交互(内含大量知识点)

    Gson则负责JSON的序列化和反序列化。两者结合,可以轻松地处理JSON数据的发送和接收。 综上所述,Android客户端与服务器端的JSON数据交互涉及到多个层次的技术,从基础的JSON解析到复杂的文件上传,都需要开发者有...

    AngularJS上传文件的示例代码

    同时,`transformRequest: angular.identity`确保原始的FormData对象不被AngularJS进行序列化处理。 在后台,我们使用SpringBoot/SpringMVC来接收并处理上传的文件。为了接收文件,我们需要在Controller的方法中...

    精简的ajax上传

    默认情况下,`processData`为true,jQuery会尝试把数据转化为字符串,如果`data`是一个对象,它会将其转换为序列化的查询字符串。但是,在文件上传时,我们希望保留文件对象的原貌,而不是将其转换成字符串。因此,...

    ASP.NET jquery ajax传递参数的实例

    以JSON格式传递参数,需要在前端序列化对象,并在后台反序列化。前端示例: ```javascript var json = JSON.stringify({ flag: returnflag, guid: guid }); $.ajax({ type: "POST", async: "false", url: "khdf_...

    解决Vue axios post请求,后台获取不到数据的问题方法

    总的来说,解决Vue axios POST请求后台获取不到数据的问题通常需要理解数据如何在前后端之间传输,并根据具体的数据结构选择合适的序列化和解析方法。同时,保持良好的沟通与合作,确保前端和后端的接口约定一致,也...

    Ajax相关学习内容整理.pdf

    `FormData`对象用于序列化表单数据,用于异步传输。可以创建一个`FormData`对象,并且通过`append`方法添加数据,之后利用`XMLHttpRequest`的`send`方法发送。 对于二进制文件上传,需要设置请求头`Content-Type`为...

    AFNetworking2.5

    下载文件时,可以使用`setDownloadDestinationPath:`方法设置保存路径。 ```objc NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://example.com/file"]]; ...

    AngularJs的$http发送POST请求,php无法接收Post的数据的问题及解决方案

    // 自定义序列化函数(可选,若已有其他自定义序列化方式) $httpProvider.defaults.transformRequest.push(function(obj) { var query = ''; // 这里实现类似$.param()的功能,将对象转换为URL编码格式的字符串...

    struts2标签库

    2. `&lt;s:file&gt;&lt;/s:file&gt;`:用于文件上传功能。 3. `&lt;s:form action=""&gt;&lt;/s:form&gt;`:创建表单,可以指定Action来处理表单提交。 G部分: 1. `&lt;s:generator separator="" val=""&gt;&lt;/s:generator&gt;`:配合`s:iterator`...

Global site tag (gtag.js) - Google Analytics