Ajax上传数据和上传文件（三种方式）
Ajax向后端发送数据可以有三种方式：原生Ajax方式，jQuery Ajax方式，iframe+form 方式（伪造Ajax方式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.btn {
background-color: coral;
color: white;
padding: 5px 10px;
border-radius: 26%;
cursor: pointer;
}
</style>
</head>
<body>
<h1>原生Ajax测试</h1>
<a class="btn" onclick="AjaxTest1()">get发送</a> <a class="btn" onclick="AjaxTest2()">post发送</a> <h1>仿Ajax(iframe+form)测试</h1>
<iframe src="" frameborder="" id="ifm" name="ifm"></iframe>
<form action="/ajax" method="get" target="ifm" id="fm">
<p><input type="text" name="user"></p>
<p><a onclick="AjaxTest4()">提交</a></p>
{% comment %} <p><input type="submit" value="提交"></p>{% endcomment %}
</form> <h1>上传文件</h1>
<h3>Ajax(jQuery+原生)上传</h3>
<p><input type="file" id="file"></p>
<a class="btn" onclick="AjaxTest5()">上传</a> <h3>Ajax(iframe+form)上传</h3>
<iframe src="" frameborder="" id="ifm2" name="ifm2"></iframe>
<form action="/ajax" method="post" target="ifm2" enctype="multipart/form-data" id="fm2">
<p><input type="file" id="if_file" name="k3"></p>
<a class="btn" onclick="AjaxTest6()">上传</a>
</form> <script>
function AjaxTest1() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(xhr.responseText);
}
};
xhr.open("GET", "/ajax?p=123");
xhr.send(null);
} function AjaxTest2() {
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(xhr.responseText);
}
};
xhr.open("POST", "/ajax");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");
xhr.send("p=222");
} function AjaxTest4() {
document.getElementById("ifm").onload = AjaxTest3;
document.getElementById("fm").submit();
} function AjaxTest3() {
{#console.log(thi.contentWindow.document.body.innerText);#}
{#console.log($(thi).contents().find("body").html());#}
var content = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(content);
if (obj.status) {
alert(obj.message);
}
} function AjaxTest5() {
var formdata = new FormData()
formdata.append("k1", "v1");
formdata.append("k2", "v2");
formdata.append("k3", document.getElementById("file").files[0]);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
console.log(xhr.responseText);
}
};
xhr.open("POST", "/ajax");
{#xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset-UTF-8");#}
xhr.send(formdata);
} function AjaxTest6() {
document.getElementById("ifm2").onload = AjaxTest7;
document.getElementById("fm2").submit();
} function AjaxTest7() {
{#console.log(thi.contentWindow.document.body.innerText);#}
{#console.log($(thi).contents().find("body").html());#}
var content = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(content);
console.log(obj);
}
</script>
</body>
三种方式传递数据和上传文件HTML页面
from django.shortcuts import render,HttpResponse,redirect
import uuid
import os
import json # Create your views here.
def ajax(request):
print("get请求：",request.GET)
print("post请求：",request.POST)
# print("请求体：",request.body)
print(request.FILES)
ret={'status':True,'message':'ok!'}
file=request.FILES.get("k3")
f=open(file.name,"wb")
for i in file.chunks():
f.write(i);
f.close() return HttpResponse(json.dumps(ret)) def index(request):
return render(request,"index.html")
后端view函数接收数据
模拟网站上传图片并在网页实时显示图片效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<iframe src="" frameborder="" id="ifm" name="ifm" style="display: none"></iframe>
<form action="/upload" method="post" enctype="multipart/form-data" id="fm" target="ifm">
<p><input type="file" onchange="upload()" name="img"></p>
</form>
<h3>预览</h3>
<div id="preview"> </div>
<script src="/static/jquery-1.11.0.js"></script>
<script>
function upload() {
document.getElementById("ifm").onload = uploadifm;
document.getElementById("fm").submit();
} function uploadifm() {
var content = this.contentWindow.document.body.innerHTML;
var obj = JSON.parse(content);
var tag = document.createElement("img");
tag.src = obj.path;
$("#preview").empty().append(tag);
}
</script>
</body>
</html>
上传图片并在上传页面展示HTML页面
from django.shortcuts import render,HttpResponse,redirect
import uuid
import os
import json # Create your views here. def upload(request):
if request.method=="GET":
return render(request,"upload.html")
else:
dic={'status':True,'path':None,'message':None}
img=request.FILES.get("img")
uid=str(uuid.uuid4())
file_path=os.path.join("static",uid+img.name)
f=open(file_path,"wb")
for i in img.chunks():
f.write(i)
f.close()
dic["path"]=file_path
dic["message"]="上传成功！"
return HttpResponse(json.dumps(dic))
上传图片并在上传页面展示后端view函数
Ajax上传数据和上传文件（三种方式）的更多相关文章
- hive 分区表与数据产生关联的三种方式
所谓关联,可以理解为能够使用select查询到 1.load 这是最常用的一种方式 load data [local] inpath "数据路径" into table table ...
- MVC ，Action方法传数据给视图有几种方式？--PS：tempData和Viewbag，还有ViewData之间的区别
//---------------------------------控制器向视图传递数据 public ActionResult TransData() { //1.ViewBag ViewBag. ...
- getline数据来源你的三种方式
(1)getline从交互式的用户输入中\c中获取内容: # awk 'BEGIN {system("echo \"Input your name:\"");g ...
- C#批量插入数据到Sqlserver中的三种方式
本篇,我将来讲解一下在Sqlserver中批量插入数据. 先创建一个用来测试的数据库和表,为了让插入数据更快,表中主键采用的是GUID,表中没有创建任何索引.GUID必然是比自增长要快的,因为你生 成 ...
- 【转载】C#批量插入数据到Sqlserver中的三种方式
引用:https://m.jb51.net/show/99543 这篇文章主要为大家详细介绍了C#批量插入数据到Sqlserver中的三种方式,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 本篇, ...
- Git应用详解第四讲：版本回退的三种方式与stash
前言 前情提要:Git应用详解第三讲:本地分支的重要操作 git作为一款版本控制工具,其最核心的功能就是版本回退,没有之一.熟悉git版本回退的操作能够让你真真正正地放开手脚去开发,不用小心翼翼,怕一 ...
- Django文件上传三种方式以及简单预览功能
主要内容: 一.文件长传的三种方式 二.简单预览功能实现 一.form表单上传 1.页面代码 <!DOCTYPE html> <html lang="en"> ...
- 三种方式上传文件-Java
前言:负责,因为该项目他(jetty嵌入式开始SpringMvc)实现文件上传的必要性,并拥有java文件上传这一块还没有被曝光.并 Http 更多晦涩协议.因此,这种渐进的方式来学习和实践上载文件的 ...
- 头像截图上传三种方式之一（一个简单易用的flash插件）（asp.net版本）
flash中有版权声明,不适合商业开发.这是官网地址:http://www.hdfu.net/ 本文参考了http://blog.csdn.net/yafei450225664/article/det ...
随机推荐
- 63)PHP,登录验证
首先辨析两种状态: 你的用户名和密码通过验证 只能表明你能登录,但是不能保证你登录了. 管理员信息合法和管理员处于的登录状态是两个概念:管理员信息合法证明你的用户名和密码是正确的, 但是管理员信 ...
- django框架进阶-form组件-长期维护
################## form组件做了什么事情? ####################### 之前web开发的模式,以注册为例 1,要有一个注册页面,然后有一个f ...
- MAC地址和IP地址是否缺一不可
答案是肯定的,我们来具体分析: 在网络传输的过程中,第一次将信息从A端发往B端时,首先在A端需要将信息从应用层开始到物理层进行逐层封装,到达B端后再从物理层到应用层进行逐层分用解包,最后拿到信息. 信 ...
- JDBC介绍和Mybatis运行原理及事务处理
本博客内容非自创,转载自以下三位,侵删: https://juejin.im/post/5ab7bd11f265da23906bfbc5 https://my.oschina.net/fifadxj/ ...
- centos5.5 下面 lnmp环境遇到的小问题
A)nginx 启动:/www/nginx/sbin/nginx -c /www/nginx/conf/nginx.conf 查看: ps -ef | grep nginx 停止:强制停止所有Ngin ...
- http 3种web会话管理方式
http是无状态的,一次请求结束,连接断开,下次服务器再收到请求,它就不知道这个请求是哪个用户发过来的.当然它知道是哪个客户端地址发过来的,但是对于我们的应用来说,我们是靠用户来管理,而不是靠客户端. ...
- Java 9 新特性 – 内部类的方块操作符
方块操作符 ( <> ) 在 Java 7 中就引入了,目的是为了使代码更可读. 但是呢,这个操作符一直不能在匿名内部类中使用 Java 9 修正了这个问题,就是可以在匿名内部类中使用方块 ...
- mysql表关联问题（第一卷：外键1对多之1)
表关联的问题在开发中是必不可少的,现在我先简单的谈谈我的学习经验.先来说一下外键一对多的问题. 步骤1:准备数据: (1)设计模拟场景: 一个游戏为了测试游戏的运行情况,招来了一批用户来试玩,现需要录 ...
- linux下载文件到本地_把linux服务器的文件下到本地windows
tar -cvf script.tar scriptsz script.tar 文件夹先要打包,并且要指定打包的名字. 具体: sz/rz命令: 一般来说,linux服务器大多是通过ssh来进行远 ...
- 20181026_队测_Brick Game
题目描述 给出一个\(n\)行\(m\)列的矩阵,矩阵中每个格子有一个非负整数,现在要求你去除其中的个格子,使得剩下的格子中的数的总和最大.另外,去除\(k\)个格子后,剩下的格子必须满足以下几个性质 ...