1、FormData：利用 FormData 对象，可以通过JavaScript键值对来模拟一系列表单控件，还可以使用 XML>
还是和表单提交是一样的
假设后台是php
只需要为formdata提供一个请求的接口
前端请求这个接口假设是post请求 你可以使用 $_POST["xxx"]formdata里面的健
如果这个请求有文件的话你可以通过$_FILE获取相关信息
1、请求头中指定登录态即可
2、 body中选中格式为form-data，key的类型是file，key的值对应Content-Disposition中的filename，key的vaue选择上传json文件 (文件名可以随便输入，但是json体要和body体对应)
我这块主要是后台写的时候需要用到的html里面的input的name，所以我写的name需要和后台写的是一样的，才能获取到正确的数据插一句题外话， 前端要是看不懂后台的代码，太吃亏了。。。
以下是实现上述思路的方法：
1 模板文件
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div >
<form action="">
{% csrf_token %}
<h3>用户注册</h3>
<p>用户名：<input type="text" name="userName"></p>
<p>密码：<input type="password" name="password"></p>
<p>邮箱：<input type="text" name="email"></p>
<input id="avatar" type="text" value="/static/images/samplepng" name="avatar" > {# 实际应用中要将该input标签隐藏，display:none; #}
<p><input type="submit" value="注册"></p>
</form>
<div >
<input id="avatarSlect" type="file" >
<img id="avatarPreview" src="/static/images/samplepng" title="点击更换" >
</div>
</div>
</body>
<script src="/static/jquery-321js"></script>
<script>
$(function () {
bindAvatar();
});
function bindAvatar() {
if(windowURLcreateObjectURL){
bindAvatar3();
}else if(windowFileReader){
bindAvatar2();
}else {
bindAvatar1();
}
}
/Ajax上传至后台并返回的url/
function bindAvatar1() {
$("#avatarSlect")change(function () {
var csrf = $("input[name='csrfmiddlewaretoken']")val();
var formData=new FormData();
formDataappend("csrfmiddlewaretoken",csrf);
formDataappend('avatar', $("#avatarSlect")[0]files[0]); /获取上传的对象/
$ajax({
url: '/upload_avatar/',
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (args) {
consolelog(args); /服务器端的地址/
$("#avatarPreview")attr('src','/'+args); /预览/
$("#avatar")val('/'+args); /将服务端的url赋值给form表单的隐藏input标签/
}
})
})
}
/windowFileReader本地预览/
function bindAvatar2() {
consolelog(2);
$("#avatarSlect")change(function () {
var obj=$("#avatarSlect")[0]files[0];
var fr=new FileReader();
fronload=function () {
$("#avatarPreview")attr('src',thisresult);
consolelog(thisresult);
$("#avatar")val(thisresult);
};
frreadAsDataURL(obj);
})
}
/windowURLcreateObjectURL本地预览/
function bindAvatar3() {
consolelog(3);
$("#avatarSlect")change(function () {
var obj=$("#avatarSlect")[0]files[0];
var wuc=windowURLcreateObjectURL(obj);
$("#avatarPreview")attr('src',wuc);
$("#avatar")val(wuc);
{# $("#avatarUrl")load(function () {#} /当加载后释放内存空间，但在jQuery321中会报错。浏览器关闭后也会自动释放/
{# windowURLrevokeObjectURL(wuc);#}
{# })#}
})
}
</script>
</html>
2 视图函数
upload_avatarpy
from djangoshortcuts import render, )3 路由系统
urlspy
from djangoconfurls import urlfrom djangocontrib import admin
from home import views as homeViews
urlpatterns = [
url(r'^admin/', adminsiteurls),
url(r'^upload_avatar/', homeViewsupload_avatar), # 上传头像
url(r'^test/', homeViewstest), # 测试页面
]
以上就是关于FormData、Blob、Map等几个对象概念全部的内容，包括:FormData、Blob、Map等几个对象概念、嗯，还在用Ajax嘛Fetch了解一下呀、后台怎么取得js中new formdata封装的数据等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）