<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>form表单上传文件</h1>
{#form表单提交数据时添加enctype=“multipart/form-data"#}
<form action="{% url 'upload' %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
用户名：<input type="text" name="username">
密码： <input type="password" name="password">
头像：<input type="file" name="img">
<input type="submit" >
</form>
<h1>ajax文件上传</h1>
<div>
用户名：<input type="text" name="ajaxname">
密码： <input type="password" name="ajaxpwd">
头像：<input type="file" name="img">
<input type="button" value="上传文件" id="btn">
</div>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
{#<script src="./../static_file/jquery-3.4.1.js"></script>#}
<script>
$('#btn').click(function(){
var formdata = new FormData();
var uname = $('[name=ajaxname]').val();
var password = $('[passwprd=ajaxpwd]').val();
var img = $('[name=img]')[0].files[0];
var csrf_data = $('[name=csrfmiddlewaretoken]').val();
formdata.append('username',uname);
formdata.append('password',password);
formdata.append('img',img);
formdata.append('csrfmiddlewaretoken',csrf_data);
$.ajax({
url:'{% url "upload" %}',
type:'post',
<!--data:{不适合上传文件了。
username:uname,
password:password,
img:img,
csrfmiddlewaretoken:csrf_data
}-->
data:formdata,
processData:false,
contentType:false,
success:function(res){
console.log(res)
}
})
})
</script>
</body>
</html>
注释：
注释形式在各个使用场景的形式：
<!-- 注释代码 -->是HTML的注释标签,使用 < 和 > 是符合HTML标签语法规则的。
/* 注释代码 */是CSS的注释标签
/* 注释代码 */（注释代码块）、//注释代码 （注释单行）是JS的注释标签。