HTML5+AJAX原生分块上传文件的关键参数设置

processData:false

这是jquery.ajax的一个参数。默认值为true,表示会将非字符串对象自动变成k1=v1&k2=v2的形式,例如一个数组参数{d:[1,2]},到服务端后会变成d[]=1&d[]=2的形式。

要将其设置为false后,才能上传ArrayBuffer对象,服务端直接从Request.InputStream获取原始字节流。

w3school解释:

processData

类型:Boolean

默认值: true。默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

主要代码:(以下代码是在FileReader的异步方法的ReadAsArrayBuffer的完成事件onload中调用,this指向当前reader)

$.ajax(‘/Home/File‘,
                    {
                        data: this.result,
                        type: ‘POST‘,
                        processData: false,
                        success: function (res) {
                            console.log(res);
                        },
                        error: function (err) {
                            console.log(err);
                        }
                    });

服务端接受文件类内容:

var stream = Request.InputStream;

由于只有HTML5才有FileReader对象,所以只有HTML5才支持JS原生分块上传文件。

上一篇使用基于WebSocket原生分块上传文件的方式同样只支持HTML5。

由于http1.1 默认keep-live属性,并不会每次请求重新建立连接。所以在服务端无法使用websocket的情景,但是客户端由支持html5的情况,可以采用ajax原生分块上传。

时间: 2024-11-25 12:59:23

HTML5+AJAX原生分块上传文件的关键参数设置的相关文章

【纯干货】4年前想解决的事情,今天才实验成功:浏览器原生分块上传文件

第一份软件开发工作的第一个星期(不算做试用期的一个星期,无薪水试用).因为不是软件专业,也没有经过培训和相关工作经验.老板不放心,但还是让我试一试.做的第一件事情就是上传文件,实时看进度,并且上传后预览.预览的文件类型有word,ppt,excel,flash,视频按帧获取预览图.office文件是在服务器端转成html后显示出来. 做的还满意,就留下来了,后来就在那个公司待了两年. 没解决的事情: 上传大文件,分块上传,浏览器原生不支持,需要借助第三方插件.最根本的原因就是浏览器端的js考虑的

net core分块上传文件

net core分块上传文件 写完asp.net多文件上传(http://www.cnblogs.com/bestckk/p/5987383.html)后,感觉这种上传还是有很多缺陷,于是...(省略一万字,不废话).这里我没用传统的asp.net,而选择了开源的asp.net core,原因很简单,.net core是.net新的开始,更是.net和.net开发者的未来,希望.net发展越来越好(大家的工资越来越高(●ˇ?ˇ●)). 1.前端的实现: 1).html: 1 <html> 2

使用FormData,进行Ajax请求并上传文件

使用FormData,进行Ajax请求并上传文件 这里使用JQuery,但是老版本的JQuery比如1.2是不支持的,最好使用2.0或更新版本: Html代码 <form id= "uploadForm"> <p >指定文件名: <input type="text" name="filename" value= ""/></p > <p >上传文件: <inpu

asp.net mvc ajax.beginform()无法上传文件

Asp.Net Mvc使用Ajax.BeginForm上传文件Request.Files始终为null. 使用jquery.form.js插件能解决问题.asp.net mvc ajax.beginform()无法上传文件

Fiddler小技巧-测试上传文件接口&多参数并传情况

写了多年的API了,fidder还真是方便至极相对于postman来说. 两种常用方式: 抓包:app通过代理方式,就可以在pc端看到fidder的请求了 因为会监控好多跟我们需要的没关系的HTTP请求, 就要开启过滤了 主动调试API&上传文件参数&其它参数 拷贝点击"upload file"上传之后自动生成的body然后修改: ---------------------------acebdf13572468 Content-Disposition: form-da

Ajax 无刷新上传文件插件 uploadify 的使用

在表单中无法直接使用 Ajax 上传文件,解决的思路可以是使用插件无刷新地上传文件,返回文件上传后的地址,然后把该地址作为 Ajax 的参数传递给服务器端进行数据库处理.可以使用 uploadify 插件来实现该思路. 官方网站:http://www.uploadify.com 文档地址:http://www.uploadify.com/documentation/ 插件有 Flash 版 和 HTML5 版,项目中用到的是 Flash 版. 下载 Demo 并解压: 其中 index.php

HTML5 jQuery+FormData 异步上传文件,带进度条

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link href="../resources/css/common.css" rel="stylesheet" /> <script src="../resources/js/jquery-2.1.4.js"></script> <

原生js上传文件 显示进度条

最近在做文件上传的功能,因为界面设计比较简单,就没有引用jq,但是网上大部分的上传插件都需要jq的支持.为了一个上传功能引用90多k的jq文件有点太小题大做了,所以就自己动手写了一个原生js上传的demo.下面是代码: HTML代码 <html> <head> <title></title> </head> <body> <input type="file" id="f" /> &l

原生js上传文件,使用new FormData()

当创建一个内容较多的表单,表单里面又有了文件上传,文件上传也需要表单提交,单一的上传文件很好操作: <form action="接口" enctype="multipart/form-data" method="post"> <input type="file" name="uploadFile"/> <input type="submit" value=&