前端实现
![]()
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>上传文件</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<h2>基于form表单的上传文件</h2>
<form action="" method="post" enctype="multipart/form-data">
{% csrf_token %}
<p><input type="text" name="user"></p>
<p><input type="file" name="f"></p>
<input type="submit">
</form>
<hr>
<h2>基于ajax上传文件</h2>
{% csrf_token %}
<p><input type="text" id="user"></p>
<p><input type="file" id="f"></p>
<button class="ajax_btn">上传</button>
<script>
$(".ajax_btn").click(function () {
var formdata = new FormData();
formdata.append("user", $("#user").val());
formdata.append("csrfmiddlewaretoken", $("[name='csrfmiddlewaretoken']").val());
formdata.append("f", $("#f")[0].files[0]);
$.ajax({
url: "/put_ajax/",
type: "post",
data: formdata,
contentType: false,
processData: false,
success: function (data) {
alert("上传成功！")
}
})
})
</script>
</body>
</html>
index.html