c#+js 使用formdata上传文件

如果不是使用form表单submit的形式,我们可以手动通过formdata传值(针对文件上传等)

比如:

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link href="~/jquery-easyui-master/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/jquery-easyui-master/themes/icon.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/jquery-easyui-master/jquery.easyui.min.js"></script>
    <title>Test</title>
</head>

<body>
    <input id="my" name="my" class="easyui-filebox" width="300"/>
    @*<input name="my" type="file" width="300"/>*@
    <button onclick="submitV();">提交</button>
    <script>
        function submitV() {
            var dom = $(‘input[name="my"]‘)[0];//获取上传文件dom对象
            var forms = $(‘<form></form>‘).append($(dom).clone());//复制dom对象,创建表单
            var formData = new FormData(forms[0]);
            /*
            由于easyui生成的dom有各种嵌套,直接通过id获取的dom不是一个type为file的input
            这里可以通过设置name属性,通过name获取
            formdata对象可以附加各种表单值,文件对象也是可以的
            formData.append("myValue", ‘myValue‘);
            formData.append("my", $(‘input[name="my"]‘)[0].files[0]);

            还有一种方式就是通过form表单的dom去实例化foamdata,比如:
            var formData = new FormData($(‘<form><input name="my" value="myvalue"/></form>‘)[0]);
            */

            $.ajax({
                url: ‘@Url.Action("TestPost")‘,
                type: ‘POST‘,
                data: formData,
                async: false,
                cache: false,
                contentType: false,// 告诉jQuery不要去设置Content-Type请求头
                processData: false// 告诉jQuery不要去处理发送的数据
            });
        }
    </script>
</body>
</html>

其中,ajax参数说明:

参数名 类型 描述
url String (默认: 当前页地址) 发送请求的地址。
type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
timeout Number 设置请求超时时间(毫秒)。此设置将覆盖全局设置。
async Boolean (默认: true) 默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
beforeSend Function 发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头。XMLHttpRequest 对象是唯一的参数。

function (XMLHttpRequest) {          this; // the options for this ajax request          }
cache Boolean (默认: true) jQuery 1.2 新功能,设置为 false 将不会从浏览器缓存中加载请求信息。
complete Function 请求完成后回调函数 (请求成功或失败时均调用)。参数: XMLHttpRequest 对象,成功信息字符串。

function (XMLHttpRequest, textStatus) {          this; // the options for this ajax request          }
contentType String
(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。告诉服务器从浏览器提交过来的数据格式。

例如:我们提交数据时假如使用了 JSON2.js 中方法 JSON.stringify(obj) 格式化为json字符串后,再默认提交就会报错。这个时候就需要指定提交的内容格式为:"application/json"。

data Object,
String

发送到服务器的数据。

若data数据类型为JavaScript对象或数 组,Jquery在提交之前自动调用JQuery.param()方法把要发送的数据编码成为"application/x-www-form- urlencoded"格式的数据(即 name=value&name1=value1);JavaScript对象必须为 Key/Value 格式;如果为数组,jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 ‘&foo=bar1&foo=bar2‘;

若data数据类型为String类型,则直接默认该数据已经按照"application/x-www-form-urlencoded"格式编码完成,不再转换。

processData选项可以控制是否进行转换。该选项默认为true。

dataType String
预期服务器返回的数据类型。设定HttpHeader中“Accept”域的内容,告诉服务器浏览器可以想要返回的数据格式类型,同时JQuery也会根据该类型对返回的数据进行处理。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。

"html": 返回纯文本 HTML 信息;包含 script 元素。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。

"json": 返回 JSON 数据 。JQuery将返回的字符串格式数据自动转化为Javascript对象,便于直接使用obj.property格式访问。若没有指定该选项,即使返回的是JSON格式的字符串,JQuery也不会自动转换。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

error Function (默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。

function (XMLHttpRequest, textStatus, errorThrown) {          // 通常情况下textStatus和errorThown只有其中一个有值           this; // the options for this ajax request          }
global Boolean (默认: true) 是否触发全局 AJAX 事件。设置为 false 将不会触发全局 AJAX 事件,如 ajaxStart 或 ajaxStop 。可用于控制不同的Ajax事件
ifModified Boolean (默认: false) 仅在服务器数据改变时获取新数据。使用 HTTP 包 Last-Modified 头信息判断。
processData Boolean (默认: true) 默认情况下,发送的数据将被转换为对象(技术上讲并非字符串) 以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
success Function 请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态

function (data, textStatus) {          // data could be xmlDoc, jsonObj, html, text, etc...          this; // the options for this ajax request          }

原文地址:https://www.cnblogs.com/lcawen/p/8797475.html

时间: 2024-11-06 17:25:11

c#+js 使用formdata上传文件的相关文章

js通过formData上传文件,Spring后台处理

1.前端 var formData = new FormData(); formData.append('file', $("#file").val()); $.ajax({ url:'地址', type:'post', data:formData, async:false, processData:false, contentType:false, success:function (response) { alert(response.msg); } }) 2.controller

使用FormData上传文件、图片

关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单 与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用

Nodejs学习笔记(八)--- Node.js + Express 实现上传文件功能(felixge/node-formidable)

目录 前言 formidable简介 创建项目并安装formidable 实现上传功能 运行结果 部分疑惑解析 写在之后 前言 前面讲了一个构建网站的示例,这次在此基础上再说说web的常规功能----文件上传,示例以一个上传图片的功能为例子 上传功能命名用formidable实现,示例很简单! PS:最近比较忙,距上一次更新已经比较久了^_^! formidable简介 nodejs原生实现上传还是比较麻烦,有兴趣的自已去参考一下网上有网友写的代码 这里选择了formidable,也是githu

Js 跨域上传文件

代码在github上( https://github.com/andygithubchen/jsUpload ),请结合github上的文件阅读. 主要实现js跨域上传文件,这里的跨域目前只在两个域名所指向的服务器在同一局域网内. 当然,这两种方案都可以做同域名上传. 例如: 192.168.1.60 www.test.cn 192.168.1.61 www.video.cn 如果要在www.test.com域名下上传文件到www.video.com域名下,可以使用下面这两个方案: 方案一(在s

httpclient通过post multipart/form-data 上传文件

httpclient通过post multipart/form-data 上传文件 public static String httpClientUploadFile(String url, File file) { CloseableHttpClient httpClient = HttpClients.createDefault(); String result = ""; //每个post参数之间的分隔.随意设定,只要不会和其他的字符串重复即可. String boundary

关于JS提交file 上传文件

 最近因写一个上传功能,不能刷新页面,且页面得有后台返回的信息,因而不能使用form直接提交表单,尝试使用is提交并接受返回数据,不多说代码如下: 前台: <form id='pdf-form' enctype="multipart/form-data" method="POST" action="" > <input type="hidden" name="order_id" value

formData上传文件

需要将选中的xml传到后台,通过xslt转换为html html: <form id="uploadForm" enctype="multipart/form-data"> <input type="file" name="testFile" value="选择文件"> <input type="button" value="添加" id

js无刷新上传文件

传统的文件上传方式 <form action="" method="POST" enctype="multipart/form-data"> <input type="file" name="file"/> <input type="submit"/> </form> 在执行上传后,页面会跳转到action指定的地址. 一般用户需要使用无页

简单介绍使用GooUploader.js实现批量上传文件的方法(使用struts2)

最近的网站项目中需要实现上传pdf的功能,期间找了很多jquery的插件,都不能满足要求,最后找到GooUploader.js,由于自己是第一次接触上传文件的功能,虽然看了很多写地详细的博客,还是花了很长时间才应用到项目中,所以在这里自己总结一下. GooUploader.js插件是在swfupload.js基础上进行扩展的,有些比较好的特点: 1. 支持批量文件上传: 2. 上传文件时,选择文件后,可以选择单个文件上传,也可以选择批量文件上传: 3. 开始上传文件后,可以取消单个文件上传,也可