Django文件上传三种方式以及简单预览功能

 主要内容:

一、文件长传的三种方式

二、简单预览功能实现

1.页面代码

Title

2.后端view函数处理

request.method== render(request, request.method==={:,:999=request.FILES.get() with open(os.path.join(,img_obj.name), chunk img_obj.chunks(chunk_size=1024 HttpResponse(json.dumps(res))
FormData使用方式:

  • 创建一个空的FormData对象,然后再用append方法逐个增加键值对

  var formdata = new FormData();  formdata.append("name","xx");  formdata.append("flie",filename);

  • 取得form元素对象,将它作为参数传入FormData对象中。

  var formOjb = document.getElementById("form");  var formdata = new FormData(formOjb );

  • 利用form元素对象的getFormData方法生成它

  var formobj = document.getElementById("form");  var formdata = formobj.fetFormData();

1.页面代码

Title

<span style="color: #0000ff;"><<span style="color: #800000;">form <span style="color: #ff0000;">action<span style="color: #0000ff;">="{% url 'upload' %} "<span style="color: #ff0000;"> method<span style="color: #0000ff;">="post"<span style="color: #ff0000;"> enctype<span style="color: #0000ff;">="multipart/form-data"<span style="color: #0000ff;">><span style="color: #000000;">
{% csrf_token %}
<span style="color: #0000ff;"><<span style="color: #800000;">input <span style="color: #ff0000;">type<span style="color: #0000ff;">="file"<span style="color: #ff0000;"> name<span style="color: #0000ff;">="img"<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">form<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">span <span style="color: #ff0000;">style<span style="color: #0000ff;">="padding: 5px;color: royalblue"<span style="color: #ff0000;"> onclick<span style="color: #0000ff;">="Jqajax();"<span style="color: #0000ff;">>jq上传<span style="color: #0000ff;"></<span style="color: #800000;">span<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">type<span style="color: #0000ff;">="text/javascript"<span style="color: #ff0000;"> src<span style="color: #0000ff;">="/static/jquery-2.1.1.min.js"<span style="color: #0000ff;">></<span style="color: #800000;">script<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">script <span style="color: #ff0000;">type<span style="color: #0000ff;">="text/javascript"<span style="color: #ff0000;"> src<span style="color: #0000ff;">="/static/jquery.cookie.js"<span style="color: #0000ff;">></<span style="color: #800000;">script<span style="color: #0000ff;">>
<span style="color: #0000ff;"><<span style="color: #800000;">script<span style="color: #0000ff;">>

<span style="background-color: #f5f5f5; color: #0000ff;"&gt;function</span><span style="background-color: #f5f5f5; color: #000000;"&gt; Jqajax() {
   </span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; file_obj</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #000000;"&gt;$(</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;input[name="img"]</span><span style="background-color: #f5f5f5; color: #000000;"&gt;'</span><span style="background-color: #f5f5f5; color: #000000;"&gt;)[</span><span style="background-color: #f5f5f5; color: #000000;"&gt;0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;].files[</span><span style="background-color: #f5f5f5; color: #000000;"&gt;0</span><span style="background-color: #f5f5f5; color: #000000;"&gt;];</span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;获取dom形式的文件对象</span>
   <span style="background-color: #f5f5f5; color: #0000ff;"&gt;var</span><span style="background-color: #f5f5f5; color: #000000;"&gt; form_obj</span><span style="background-color: #f5f5f5; color: #000000;"&gt;=</span><span style="background-color: #f5f5f5; color: #0000ff;"&gt;new</span><span style="background-color: #f5f5f5; color: #000000;"&gt; FormData();   </span><span style="background-color: #f5f5f5; color: #008000;"&gt;//</span><span style="background-color: #f5f5f5; color: #008000;"&gt;创建formdata对象</span>

<span style="background-color: #f5f5f5; color: #000000;"> form_obj.append(<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">img<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">,file_obj); <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">将文件对象加载formdata中
<span style="background-color: #f5f5f5; color: #000000;"> $.ajaxSetup({ <span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">设置csrf_token
<span style="background-color: #f5f5f5; color: #000000;"> beforeSend: <span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;"> (xhr,settings) {
xhr.setRequestHeader(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">X-CSRFToken<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">,$.cookie(<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">csrftoken<span style="background-color: #f5f5f5; color: #000000;">"<span style="background-color: #f5f5f5; color: #000000;">));
}
});
$.ajax({
type: <span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">POST<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">,url: <span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">{% url <span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">upload<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;"> %}<span style="background-color: #f5f5f5; color: #000000;">'<span style="background-color: #f5f5f5; color: #000000;">,data: form_obj,<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;">指明发送的文件对象
<span style="background-color: #f5f5f5; color: #000000;"> processData: <span style="background-color: #f5f5f5; color: #0000ff;">false<span style="background-color: #f5f5f5; color: #000000;">,<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 告诉jquery要传输data对象
<span style="background-color: #f5f5f5; color: #000000;"> contentType: <span style="background-color: #f5f5f5; color: #0000ff;">false<span style="background-color: #f5f5f5; color: #000000;">,<span style="background-color: #f5f5f5; color: #008000;">//<span style="background-color: #f5f5f5; color: #008000;"> 告诉jquery不需要增加请求头对于contentType的设置
<span style="background-color: #f5f5f5; color: #000000;"> success: <span style="background-color: #f5f5f5; color: #0000ff;">function<span style="background-color: #f5f5f5; color: #000000;"> (data) {
console.log(data)
}
})
}
<span style="color: #0000ff;"></<span style="color: #800000;">script<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">body<span style="color: #0000ff;">>
<span style="color: #0000ff;"></<span style="color: #800000;">html<span style="color: #0000ff;">>

后端处理逻辑不变

原理:iframe数据提交不刷新页面

好处:通过iframe的src属性进行上传功能,这样的好处不用依赖FormData对象,低版本浏览器可能不支持该对象。

前端页面

Title

后端处理逻辑一样

原理:通过图片上传时候服务端返回文件路径,然后使用js设置a标签src属性实现预览功能

后端代码:

request.method== render(request, request.method===request.FILES.get() file_path=os.path.join(={:,:999, chunk img_obj.chunks(chunk_size=1024 HttpResponse(json.dumps(res))

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


注:所有源代码均实测运行过。所有源代码均已上传CSDN,请有需要的朋友自行下载。
继承APIView和ViewSetMixin;作用也与APIView基本类似,提供了身份认证、权限校验、流量管理等。ViewSet在开发接口中不经常用。
一、Django介绍Python下有许多款不同的 Web 框架。Django是重量级选手中最有代表性的一位。许多成功的网站和APP都基于Django。Django 是一个开放源代码的 Web 应用框架,由 Python 写成。Django 遵守 BSD 版权,初次发布于 2005 年 7 月, 并于 2008 年 9 月发布了第一个正式版本 1.0 。Django学习线路Django 采用了 MVT 的软件设计模式,即模型(Model),视图(View)和模板(Template)。这个MVT模式并
本文从nginx快速掌握到使用,gunicorn快速掌握到使用,实现小白快速搭建django项目,并对可能出现的报错进行了分析
uniapp微信小程序订阅消息发送服务通知
Django终端打印SQL语句 1 Setting配置: 2 默认python 使用的MysqlDB连接,Python3 支持支持pymysql 所有需要在app里面的__init__加上下面配置:
url: re_path(&#39;authors/$&#39;, views.AuthorView.as_view()), re_path(&#39;book/(?P\d+)/$&#39;, vie
前提 关于html寻找路线: template 如果在各个APP中存在, Django 会优先找全局template 文件下的html文件,如果全局下的template文件没有相关的html Djan
// GET请求request.GET // POST请求request.POST // 处理文件上传请求request.FILES // 处理如checkbox等多选 接受列表request.get
from bs4 import BeautifulSoup#kindeditordef kindeditor(request): s = &#39;&#39;&#39; &lt;li&gt;&lt;s
view.py 配置 html 配置
from django.http import JsonResponse JsonResponse 里面代码会加这一个响应头 kwargs.setdefault(&#39;content_type&#
#下面两种是基于QuerySet查询 也就是说SQL中用的jion连表的方式查询books = models.UserInfo.objects.all() print(type(books)) &gt
return HttpResponse(&quot;OK&quot;) 返回一个字符串 return redirect(&quot;/index/&quot;) 返回URL return render
from django.http import JsonResponse JsonResponse 里面代码会加这一个响应头 kwargs.setdefault(&#39;content_type&#
浏览器有一个很重要的概念——同源策略(Same-Origin Policy)。所谓同源是指,域名,协议,端口相同。不同源的客户端脚本(javascript、ActionScript)在没明确授权的情况
自动发送 &gt; 依赖jQuery文件 实例--&gt;GET请求: 手动发送 &gt; 依赖浏览器XML对象(也叫原生ajax) Ajax主要就是使用 【XmlHttpRequest】对象来完成请
#下面两种是基于QuerySet查询 也就是说SQL中用的jion连表的方式查询books = models.UserInfo.objects.all() print(type(books)) &gt
// GET请求request.GET // POST请求request.POST // 处理文件上传请求request.FILES // 处理如checkbox等多选 接受列表request.get
return HttpResponse(&quot;OK&quot;) 返回一个字符串 return redirect(&quot;/index/&quot;) 返回URL return render