主要内容：

一、文件长传的三种方式

二、简单预览功能实现

Meta 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.页面代码

Meta 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;<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>dom形式的<a href="/tag/wenjian/" target="_blank" class="keywords">文件</a>对象</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对象，低版本浏览器可能不支持该对象。

前端页面

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