ajax如何上传文件

原文地址

一、总结

1. 怎么用ajax上传文件？

使用FormData，FormData+ajax即可异步上传二进制文件

2. FormData是什么？

利用 FormData 对象，可以通过JavaScript键值对来模拟一系列表单控件，还可以使用 XMLHttpRequest的send() 方法来异步提交表单。
与普通的Ajax相比，使用FormData 的最大优点就是可以异步上传二进制文件。

3. FormData+ajax上传文件的注意事项？

$.ajax({url: "upload.ashx",type: "POST",data: formData,/***必须false才会自动加上正确的Content-Type*/contentType: false,/*** 必须false才会避开jQuery对 formdata 的默认处理* XMLHttpRequest会对 formdata 进行正确的处理*/processData: false,success: function (data) {

二、文件的上传（表单上传和ajax文件异步上传）

项目中用户上传文件总是少不了的，既然有了表单上传为什么又要ajax上传呢？
因为表单上传过程中，整个页面就要刷新了，没有办法添加loading，而且如果上传的文件较大，当用户等待的时间中可能会有其他操作；所以这时就需要ajax上传文件，ajax上传就可以达到只刷新局部位置，并且可以接受后台的反馈来控制loading

<?php $file = $_FILES;$param = $_POST;
?>
<form enctype="multipart/form-data"><div class="form-group"><label for="upload_name">名称</label><div class="col-sm-10"><input type="text" class="form-control" id="upload_name" placeholder="请输入名称"></div></div><div class="form-group"><label for="testfile">上传文件</label><div class="col-sm-10"><input type="file" accept=".xlsx" id="testfile"><!-- 多文件上传:<input type="file" accept=".xlsx" id="testfile" multiple="multiple"/> --></div></div>
</form>
<input type="button" class="submit" value="上传">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>$('.submit').click(function () {var files = $('#testfile').prop('files');var name = $.trim($('#upload_name').val());if (files.length <= 0) {alert("请选择文件");return;}var formData = new FormData();formData.append("testfile", files[0]);// 多文件上传需要给参数名称后面加上[]// formData.append("testfile[]", files[1]);formData.append("name", name);$.ajax({url:'./ajaxuploadfile.php',type:'POST',async: false,data: formData,dataType:'json',cache: false, // 上传文件无需缓存processData : false, // 使数据不做处理contentType : false, // 不要设置Content-Type请求头success: function(data){console.log(data);if (data.status == 'ok') {alert('上传成功！');}},error:function(response){console.log(response);}});})
</script>

三、注意

form的enctype必须是multipart/form-data才可以上传多个文件，ajax通过FormData来上传数据，ajax的cache、processData、contentType均要设置为false。
cache设为false是为了兼容ie8，防止ie8之前版本缓存get请求的处理方式。
contentType设置为false原因：https://segmentfault.com/a/1190000007207128。
processData：要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

150讲轻松搞定Python网络爬虫

ajax如何上传文件相关推荐

java获取ajax上传的文件,Java使用Ajax异步上传文件
相关代码示例: html代码片段: 名称 class="layui-input"> 描述文件请选择配置文件立即提交重置 js代码片段: //上传配置文件 $(&quo ...
jquery ajax java上传文件_jQuery Ajax方式上传文件的方法
jQuery Ajax方式上传文件用到两个对象第一个对象:FormData 第二个对象:XMLHttpRequest 目前新版的Firefox 与 Chrome 等支持HTML5的浏览器完美的支持这 ...
php ajax xmlhttpreq 上传文件 get,使用Ajax XmlHttpRequest上传文件
使用Ajax XmlHttpRequest上传文件嗨,我正在尝试使用此代码发送带有xmlhttprequest的文件. var url= "http://localhost:80/.... ...
ajax 上传文件实例,Ajax异步上传文件实例代码分享
非常不多说,直接给大家上干货,写的不好还请见谅. 具体代码如下所示: Index $(function() { $(':button').click(function () { var formDat ...
koa2：通过Ajax方式上传文件，使用FormData进行Ajax请求
koa2通过表单上传的网上很多,但通过Ajax方式上传文件,使用FormData进行Ajax请求,不好找. 参考了这个用base64上传图片的例子.https://github.com/Yuki-Mi ...
ashx获取input file 文件_通过Ajax方式上传文件(input file)，使用FormData进行Ajax请求...
一直以来上传文件都使用的是别人的组件,今天看下无刷新上传内部具体的做法.上传文件可以使用form的形式来上传,也可以通过构造formData使用ajax来上传文件: 上传图片 $(function ( ...
ajax异步上传什么意思,使用 jQuery 的 AJAX 异步上传文件
现在基本上很多网页里面都在使用 jQuery,要实现文件的异步上传,大多数的解决方法都是使用 jQuery 插件,如果你只是上传一张图片,使用插件反而觉得多余了,其实 jQuery 的 ajax() ...
ajax怎么上传文件？注意事项
ajax,即异步处理,相信程序员朋友们都会感觉到亲切吧,因为ajax在软件开发过程中实在是太常用了,还是有不少刚刚入门想学习软件开发的朋友可能不是很熟悉如何使用ajax,今天就一起来看看吧,怎样使用a ...
Ajax方式上传文件报错Uncaught TypeError: Illegal invocation
今天使用ajax上传文件时,出现了错误.数据传输的方式是通过定义formData完成的,提交的文件对象也设置为dom对象,但是还是不能发送请求.F12看到后台报了个错误:Uncaught TypeEr ...
$.messager.progress ajax,ajax异步上传文件返回undefined
ajax跨域上传文件,封装了一个上传文件的方法sendFilePost,上传文件的时候使用async: false同步上传就不会弹出等待框,返回的结果没问题,但是使用了异步的方法async: ture ...