第九篇：web之前端之web上传文件的方式
前端之web上传文件的方式
前端之web上传文件的方式
本节内容
- web上传文件方式介绍
- form上传文件
- 原生js实现ajax上传文件
- jquery实现ajax上传文件
- form+iframe构造请求上传文件
1. web上传文件方式介绍
在web浏览器上传文件一般有以下几种方式：
- form表单上传文件
- 原生js实现ajax上传文件
- jquery实现ajax上传文件
- form+iframe上传文件
其中form提交数据之后会整个刷新页面；
js通过ajax上传文件虽然不会刷新整个页面，但是他们都是通过使用formdata对象实现的，formdata对象在老版本的浏览器中并不支持；
为了兼容老版本浏览器，使用iframe方式提交；
下面几节就分别就这几种方式实现上传文件来举例说明。
2. form上传文件
这是最原始的一种方式，最开始学习web的时候就是使用这种方式提交。
注意：在form表单中如果要上传文件，一定要设置这个参数： enctype=”multipart/form-data”表示封装数据类型，把数据分成一个一个小段传输。
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.show-img{
display: inline-block;
width: 200px;
height:200px;
}
</style>
</head>
<body>
<h1>form表单上传文件</h1><hr>
<form action="/test/" method="POST" enctype="multipart/form-data">
<p>名称：<input type="text" name="user"></p>
<p>文件：<input type="file" name="testfile"></p>
<p><input type="submit" value="提交"></p>
</form>
{% for i in imglist %}
<img class="show-img" src="/{{ i.0 }}">
{% endfor %}
</body>
</html>
在后端要注意上传过来的文件是通过req.FILES.get() 方法接收的。
后端代码:
def test(req):
if req.method=="GET":
imglist=models.Img.objects.all().values_list("img_path")
return render(req,"test.html",{"imglist":imglist})
elif req.method=="POST":
user=req.POST.get("user")
file=req.FILES.get("testfile")
path=os.path.join("static","imgs",file.name)
with open(path,"wb") as f:
for chunk in file.chunks():
f.write(chunk)
print(user,file.name,file.size)
models.Img.objects.create(img_path=path)
return redirect("/test/")
3. 原生js实现ajax上传文件
js源码：
document.getElementById("js_post").onclick=function(){
var xml=new XMLHttpRequest();
var data=new FormData; //创建formdata对象
data.append("testfile",document.getElementById("file_upload").files[0]);//找到对象之后的file[0]对应的就是文件对象
xml.open("POST","/test/",true);
xml.onreadystatechange=function(){
if(xml.readyState==4 && xml.status==200){ //判断状态到4了并且返回状态码是200时才做操作
var rsp_data=JSON.parse(xml.responseText); //反序列化
if (rsp_data.state){
var url="/"+rsp_data.data; //拼接路径
var obj=document.createElement("img"); //创建标签
obj.className="show-img"; //给标签加样式
obj.src=url; //给标签加url
document.getElementById("imgs").appendChild(obj);
}
}
};
xml.send(data)
}
`
html源码：
<hr><h1>ajax上传文件</h1><hr>
<p>文件：<input id="file_upload" type="file" name="testfile"></p>
<p><button id="js_post">原生js提交</button> <button id="jquery_post">jquery提交</button></p>
<div id="imgs">
{% for i in imglist %}
<img class="show-img" src="/{{ i.0 }}">
{% endfor %}
</div>
后端源码：
def test(req):
if req.method=="GET":
imglist=models.Img.objects.all().values_list("img_path")
return render(req,"test.html",{"imglist":imglist})
elif req.method=="POST":
user=req.POST.get("user",None)
file=req.FILES.get("testfile")
path=os.path.join("static","imgs",file.name)
with open(path,"wb") as f:
for chunk in file.chunks():
f.write(chunk)
print(user,file.name,file.size)
models.Img.objects.create(img_path=path)
# return redirect("/test/")
msg={"code":200,"state":True,"data":path}
return HttpResponse(json.dumps(msg))
注意：FormData对象在添加文件对象的时候并不是把标签直接给append进去，而是找到标签之后.file(0)才是文件对象
4. jquery实现ajax上传文件
这里的html代码和后端代码相对上面没有改变，这里就不列出来了。
jquery代码：
$("#jquery_post").on("click",function(){
var data=new FormData;
data.append("testfile",document.getElementById("file_upload").files[0]);
$.ajax({
url:"/test/",
type:"POST",
dataType:"JSON",
data:data,
contentType: false,
processData: false,
success:function(rst){
if(rst.state){
var url="/"+rst.data;
$('<img class="show-img" src="'+url+'">').appendTo("#imgs")
}
}
})
})
注意：jquery的ajax会自动把我们的数据转换成字符串，不想转换时需要在ajax里面写入：contentType: false,processData: false,
5. form+iframe构造请求上传文件
html代码：
<hr><h1>form+iframe上传文件</h1><hr>
<p><iframe id="uploadfile" name="uploadfile" style="display: none"></iframe></p> <!--注意这里的name要和form中的target一致-->
<form target="uploadfile" action="/test/" method="POST" enctype="multipart/form-data">
<p>名称：<input type="text" name="user"></p>
<p>文件：<input type="file" name="testfile"></p>
<p><input type="submit" value="提交"></p>
</form>
<div id="imgs">
{% for i in imglist %}
<img class="show-img" src="/{{ i.0 }}">
{% endfor %}
</div>
注意：这里的iframe的name的值一定要和form的target的值一样，这样才能实现绑定
js代码：
$("#uploadfile").on("load",function(){ //iframe里面有个方法是onload，当上传数据成功之后服务器返回数据时才会触发该事件
var rst=JSON.parse(this.contentDocument.body.textContent);//拿到iframe里面的内容需要通过contentDocument才能拿到里面的dom对象
if (rst.state){
var url="/"+rst.data;
$('<img class="show-img" src="'+url+'">').appendTo("#imgs")
}
})
注意：拿到iframe里面的内容需要通过contentDocument才能拿到里面的dom对象
经过实际检测，当鼠标点击提交速度比较快时，js通过ajax提交数据没有问题，但是iframe就无法提交所有数据。。。
原因是ajax是异步加载的，而iframe更像是通过浏览器打开了一个新标签，等待服务端传输回来的数据。所以，当提交速度过快时无法达到相应的效果。
使用iframe的唯一一个好处目前来看也就是兼容老版本的浏览器罢了。。。
随着时间的流逝，这种方式终将被淘汰。
第九篇：web之前端之web上传文件的方式的更多相关文章
- 前端之web上传文件的方式
前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构造请求上传文件 1. web上传 ...
- 基于Flask开发网站 -- 前端Ajax异步上传文件到后台
大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...
- 小白向：web中利用request.getPart()上传文件到服务器
被文件上传弄得焦头烂额的一天,果然web中的路径和各种设置真的好讨厌= = 下面是超级小白的.及其简约的“详”解 1.明确目的: 用户将 1.txt 文件 上传到 服务器(web工程下的某个文件夹)中 ...
- 使用python3.7+Vue.js2.0+Django2.0.4异步前端通过api上传文件到七牛云云端存储
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_130 之前一篇文章是通过普通js+tornado来上传七牛云:使用Tornado配合七牛云存储api来异步切分上传文件,本次使用v ...
- 前端使用nginx上传文件时，进度获取不对
在使用iview时,上传文件获取进度时onUploadProgress返回数据不对. 原因是开启了nginx代理,本地上传时先传到本地nginx然后在传到服务器,导致获取进度不对 解决:在nginx的 ...
- Jquery_异步上传文件多种方式归纳
1.不用任何插件,利用iframe,将form的taget设为iframe的name,注意设为iframe的id是没用的,跟网上很多说的不太一致 iframe_upload.htm <!DOCT ...
- Asp.Net Mvc异步上传文件的方式
今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax ...
- ajax异步上传文件FormDate方式，html支持才可使用
今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取 是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...
- 本地向服务器上传文件的方式-FTP工具上传
笔者负责的一个研究生会的项目,向服务器端传项目代码,用到了FTP工具,这里总结下: FTP方式的步骤: 1,服务器端配置好FTP,(若没有,可网上下载一个服务器端安装的FTP).停止服务后,可以配置账 ...
随机推荐
- VisualC#数据库高级教程文档分享
这一节我们演示下怎样使用VS2010创建与发布MVC3建立的网站.使用VS2010创建MVC3.0网站,需要下载MVC3.0的安装包,这个大家可以去网络上下载. 1.项目创建 ...
- BZOJ2741: 【FOTILE模拟赛】L
2741: [FOTILE模拟赛]L Time Limit: 15 Sec Memory Limit: 162 MBSubmit: 1170 Solved: 303[Submit][Status] ...
- EasyUI中datagrid的行编辑模式中，找到特定的Editor，并为其添加事件
有时候在行编辑的时候,一个编辑框的值要根据其它编辑框的值进行变化,那么可以通过在开启编辑时,找到特定的Editor,为其添加事件 // 绑定事件, index为当前编辑行 var editors = ...
- java CopyOnWriteArrayList的使用
除了加锁外,其实还有一种方式可以防止并发修改异常,这就是将读写分离技术(不是数据库上的). 先回顾一下一个常识: 1.JAVA中“=”操作只是将引用和某个对象关联,假如同时有一个线程将引用指向另外一个 ...
- CodeForcesGym 100753B Bounty Hunter II 二分图最小路径覆盖
关键在建图 题解:http://www.cnblogs.com/crackpotisback/p/4856159.html 学习:http://www.cnblogs.com/jackiesteed/ ...
- 用opencv画矩形打上马赛克Mosaic
/*----------------------------------------------------------------------------- * * 版权声明: * 可以 ...
- vs2010的一个opencv插件
调试时,可视化mat等图像 下载及使用地址: http://visualstudiogallery.msdn.microsoft.com/657956e4-8e02-4764-8022-72a0c9c ...
- CF_402B 想法题
题目链接:http://codeforces.com/problemset/problem/402/B /**算法分析: 题意太大意,positive没注意这个问题 考察等差数列,由An=A1+(n- ...
- php学习小记2 类与对象
php类的一些特性: 1. 伪变量$this.$this是一个到主叫对象的引用.取值:该方法所从属的对象,可能是另外的对象(前提,当该方法被静态调用时).$this变量存在于一个类的非静态方法中,在静 ...
- Windows 服务 创建 和 安装 -摘自网络
What a Windows Service is Enables you to create long-running executable applications that run in the ...