原文地址
目录
- 一、总结
- 1. 怎么用ajax上传文件?
- 2. FormData是什么?
- 3. FormData+ajax上传文件的注意事项?
- 二、文件的上传(表单上传和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/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/a/1190000007207128。
-
processData:要求为Boolean类型的参数,默认为true。默认情况下,发送的数据将被转换为对象(从技术角度来讲并非字符串)以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息,请设置为false。
150讲轻松搞定Python网络爬虫
更多推荐
ajax如何上传文件
发布评论