1. {% load static %}
    2. <!DOCTYPE html>
    3. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <title>网页上传</title>
    7. </head>
    8. <body>
    9. <h1> 欢迎使用网页上传文件 </h1>
    10.     <form>
    11.         {% csrf_token %}
    12.         用户名: <input type="text" name="user">
    13.         头像: <input  type="file" name="head-png" id="file" multiple>
    14.         <input type="button" id="ajax-submit" value="提交">
    15.          <span style="color:#00ff04;font-size: 12px;" id="info"></span>
    16.     </form>
    17. <script src="{% static 'jquery.js' %} "></script>
    19. <script>
    20.     $("#ajax-submit").click(function () {
    21.         var formdata=new FormData(); // ajax上传文件的时候，需要这个类型，它会将添加给它的键值对加工成formdata的类型
    22.         formdata.append("user",$("#user").val());  // 添加键值的方法是append，注意写法，键和值之间是逗号
    23.         formdata.append("csrfmiddlewaretoken",$("[name='csrfmiddlewaretoken']").val());
    24.         formdata.append("head-png",$("#file")[0].files[0]);
    25.         $.ajax({
    26.             url:"/app01/index/",
    27.             type:"post",
    28.             data:formdata,
    29.             processData: false ,    // 不处理数据
    30.             contentType: false,    // 不设置内容类型
    31.             success:function (data) {
    32.                 console.log(data)
    33.                 var resStr = JSON.parse(data)
    34.                 if (resStr['code'] === "0000"){
    35.                     var spanEle = document.createElement('span');
    36.                     $('#info').text(resStr['msg']);
    37.                 }
    38.         }
    39.     })
    40. })
    41. </script>
    42. </body>
    43. </html>

    views.py

    1. import os.path
    3. from django.shortcuts import render,HttpResponse,redirect
    4. from django.views import  View
    5. from  django.conf import settings
    6. # Create your views here.
    8. class index(View):
    9.     html = 'h5_upload_file.html'
    11.     def get(self,request):
    12.         # print(request.GET)  # <QueryDict: {}> GET请求数据
    13.         return render(request,self.html)
    15.     def post(self,request):
    17.         user = request.POST.get('user')
    18.         file_obj = request.FILES.get('head-png')
    20.         file_name = os.path.join(settings.BASE_DIR,'img',file_obj.name)  # project/img/filename
    21.         with open(file_name,'wb') as f:
    22.             for i in file_obj:
    23.                 f.write(i)
    24.         res = '{"code":"0000","msg":"%s upload success!","url":"/app01/msg/"}' % file_obj.name
    25.         return HttpResponse(res)

    image.png