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

发布时间：2020-12-15 17:17:12 所属栏目：大数据来源：网络整理

导读：?主要内容：一、文件长传的三种方式二、简单预览功能实现 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(ch

?主要内容：

一、文件长传的三种方式

二、简单预览功能实现

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

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

<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>

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

后端处理逻辑不变

原理：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))

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!