经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 程序设计 » Django » 查看文章
django项目中form表单和ajax的文件上传功能
来源:cnblogs  作者:记住我忘记我  时间:2019/8/21 9:37:45  对本文有异议

form表单文件上传

路由

  1. # from表单上传
  2. path('formupload/',apply.formupload,name='formupload/'),

方法

  1. # form表单文件上传
  2. def formupload(request):
  3. if request.method == 'POST':
  4. image_obj = request.FILES.get('headimg')
  5. print(image_obj)
  6. with open(settings.MEDIA_ROOT+'/'+image_obj.name,'wb') as f:
  7. for lin in image_obj:
  8. f.write(lin)
  9. return HttpResponse('ok')

前端html

  1. <form action="/apply/formupload/" method="post" enctype="multipart/form-data">
  2. {% csrf_token %}
  3. <input type="file" name="headimg">
  4. <input type="submit" value="form表单上传">
  5. </form>

上传成功示例

#ajax上传

路由

  1. # ajax上传文件
  2. path('ajaxupload/',apply.ajaxupload,name='ajaxupload/'),

方法

  1. # ajax文件上传
  2. def ajaxupload(request):
  3. if request.method == 'POST':
  4. image_obj = request.FILES.get('headimg')
  5. print(image_obj)
  6. with open(settings.MEDIA_ROOT + '/' + image_obj.name, 'wb') as f:
  7. for lin in image_obj:
  8. f.write(lin)
  9. return HttpResponse('ok')

前端html

  1. <form>
  2. {% csrf_token %}
  3. {# <div>用户名:<input type="text" name="username" id="username"></div>#}
  4. <div>选择文件:<input type="file" name="headimg" id="headimg"></div>
  5. <div><input id="dosubmit" type="button" name="dosubmit" value="ajax上传"></div>
  6. </form>
  7. {# ajax上传#}
  8. <script>
  9. $(document).ready(function () {
  10. $("#dosubmit").click(function () {
  11. var formdata = new FormData();
  12. {# formdata.append("username", $("#username").val());#}
  13. formdata.append("headimg", $("#headimg")[0].files[0]);
  14. formdata.append("csrfmiddlewaretoken", "{{ csrf_token }}");
  15. $.ajax({
  16. url: "/apply/ajaxupload/",
  17. type: "post",
  18. data: formdata,
  19. contentType: false,//enctype="multipart/form-data"
  20. processData: false,//不需要转换数据类型,即不需要把传输的数据转为字符串
  21. success: function (res) {
  22. console.log(res)
  23. }
  24. });
  25. });
  26. })
  27. </script>

done。

 

原文链接:http://www.cnblogs.com/nmsghgnv/p/11385458.html

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号