- <!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>
注释:
来源: http://www.bubuko.com/infodetail-3076984.html