主要内容:
一、文件长传的三种方式
二、简单预览功能实现
2.后端view函数处理
- 创建一个空的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.页面代码
<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;">function</span><span style="background-color: #f5f5f5; color: #000000;"> Jqajax() {
</span><span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> file_obj</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #000000;">$(</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">input[name="img"]</span><span style="background-color: #f5f5f5; color: #000000;">'</span><span style="background-color: #f5f5f5; color: #000000;">)[</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">].files[</span><span style="background-color: #f5f5f5; color: #000000;">0</span><span style="background-color: #f5f5f5; color: #000000;">];</span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">获取dom形式的文件对象</span>
<span style="background-color: #f5f5f5; color: #0000ff;">var</span><span style="background-color: #f5f5f5; color: #000000;"> form_obj</span><span style="background-color: #f5f5f5; color: #000000;">=</span><span style="background-color: #f5f5f5; color: #0000ff;">new</span><span style="background-color: #f5f5f5; color: #000000;"> FormData(); </span><span style="background-color: #f5f5f5; color: #008000;">//</span><span style="background-color: #f5f5f5; color: #008000;">创建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的src属性进行上传功能,这样的好处不用依赖FormData对象,低版本浏览器可能不支持该对象。
前端页面
后端处理逻辑一样
后端代码:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。