c#+js 使用formdata上传文件

时间 2019-11-14

原文原文链接

若是不是使用form表单submit的形式，咱们能够手动经过formdata传值（针对文件上传等）css

好比：html

<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参数说明：python

参数名	类型	描述
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") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。告诉服务器从浏览器提交过来的数据格式。jquery 例如：咱们提交数据时假如使用了 JSON2.js 中方法 JSON.stringify(obj) 格式化为json字符串后，再默认提交就会报错。这个时候就须要指定提交的内容格式为："application/json"。ajax
data	Object, String	发送到服务器的数据。json 若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 }