在实际项目开发中经常用到上传文件之类的需求,最常用的方法就是通过form表单进行上传。后台通过request.FILES获取,下面分点描述如何通过表单进行上传文件。
一、前端代码。
<form action="/modify" method="post" enctype="multipart/form-data" >
{% csrf_token %}
<div class="img-btn" onclick="$(this).next().click();">编辑头像</div>
<input type="file" name="img" id="img" style="display: none;" onclick="changeHead(0);">
<input type="submit" value="保存">
</form>
其中, enctype="multipart/form-data"这句话必须要加,你也可以为你的界面添加一些js样式。如果不想通过form自动提交的方式,可以通过ajax构造数据也是可以的。大致格式:(需要关闭type='submit',并修改为'button'添加点击事件)
var form_data = new FormData();
form_data.append('logo', $('#img')[0].files[0]);
form_data.append('csrfmiddlewaretoken', '{
{ csrf_token }}');
$.ajax({
url:'/XXX',
type:'post',
data:form_data,
processData: false,// 告诉jQuery不要去处理发送的数据, 发送对象。
contentType