如何使用Ajax实现简单的文件上传

如何使用Ajax实现简单的文件上传

1、原由

相信你们在作web项目中不免会遇到文件上传的业务需求，上传文件通常是经过表单来上传，但当咱们不想使用表单时就能够经过Ajax的方式来上传文件，这里就给你们分享使用Ajax上传文件的方法。

2、web页面

这里我简单地写了一个Demo页面，由一个input，一个button组成。在button的点击事件中写上传文件的Ajax请求，代码以下图所示：

效果图：

代码解析：要想使用文件上传，咱们要用到input控件并将它的type属性设置为file。

经过在控制台输入 $("#exampleInputFile")[0].files[0] 能够查看到文件的信息，而后咱们经过formdata.append方法将其添加至FormData中：

请求类型设置为post没什么好说的，注意这里要将contentType设为false，目的是防止上传文件中出现分界符致使服务器没法正确识别文件起始位置，这就涉及到了http协议的知识，

想要深度研究的小伙伴可自行百度，这里推荐大佬的文章--“浅谈contentType = false”。

通常来讲，用了contentType = false，能够再加上一个processData = flase，能够参考processData的解释：

processData
类型：Boolean
默认值: true。默认状况下，经过data选项传递进来的数据，若是是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 “application/x-www-form-urlencoded”。
若是要发送 DOM 树信息或其它不但愿转换的信息，请设置为 false。

3、后台服务器

使用C#的同窗能够直接使用Request.Files拿到相应数据而后进行保存等操做：

注意一下：若是文件较大的活，记得在配置文件中设置maxAllowedContentLength和maxRequestLength，解除文件传输大小限制，详情见大神文章--“ASP.NET 设置文件上传的最大大小”。

使用其余语言的小伙伴们就自行百度怎么拿到Ajax上传的文件了，本文仅做为我的学习参考，有问题欢迎你们指出。

参考文章：

ajax实现文件上传（使用FormData）

浅谈contentType = false