前端之web上传文件的方式

本节内容

  1. web上传文件方式介绍
  2. form上传文件
  3. 原生js实现ajax上传文件
  4. jquery实现ajax上传文件
  5. 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上传文件的方式的更多相关文章

  1. 第九篇:web之前端之web上传文件的方式

    前端之web上传文件的方式   前端之web上传文件的方式 本节内容 web上传文件方式介绍 form上传文件 原生js实现ajax上传文件 jquery实现ajax上传文件 form+iframe构 ...

  2. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  3. Web上传文件的原理及实现

    现在有很多Web程序都有上传功能,实现上传功能的组件或框架也很多,如基于java的Commons FileUpload.还有Struts1.x和Struts2中带的上传文件功能(实际上,Struts2 ...

  4. Java+web+上传文件夹

    用JAVA实现大文件上传及显示进度信息 ---解析HTTP MultiPart协议 (本文提供全部源码下载,请访问 https://github.com/1269085759/up6-jsp-mysq ...

  5. Web上传文件

      客户端      相对于FTP文件上传,Web文件上传速度慢一些,但使用方便,不需要客户端,而且权限比FTP容易控制. Web文件上传采用POST方式,上传文件需要设置FORM的entype属性为 ...

  6. Asp.Net Mvc异步上传文件的方式

    今天试了下mvc自带的ajax,发现上传文件时后端action接收不到文件, Request.Files和HttpPostedFileBase都接收不到.....后来搜索了下才知道mvc自带的Ajax ...

  7. Jquery_异步上传文件多种方式归纳

    1.不用任何插件,利用iframe,将form的taget设为iframe的name,注意设为iframe的id是没用的,跟网上很多说的不太一致 iframe_upload.htm <!DOCT ...

  8. Web上传文件的三种解决方案

    第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname =  ...

  9. 使用python3.7+Vue.js2.0+Django2.0.4异步前端通过api上传文件到七牛云云端存储

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_130 之前一篇文章是通过普通js+tornado来上传七牛云:使用Tornado配合七牛云存储api来异步切分上传文件,本次使用v ...

随机推荐

  1. 非关系型数据库来了,CRL快速开发框架升级到版本4

    轮子?,我很任性,我要造不一样的轮子,同时支持关系型和非关系型的框架有没有 新版数据查询作了些调整,抽象了LabmdaQueryy和DBExtend,升级到版本4,非关系数据库MongoDB被支持了! ...

  2. [Algorithm] 使用SimHash进行海量文本去重

    在之前的两篇博文分别介绍了常用的hash方法([Data Structure & Algorithm] Hash那点事儿)以及局部敏感hash算法([Algorithm] 局部敏感哈希算法(L ...

  3. 代码的坏味道(13)——过多的注释(Comments)

    坏味道--过多的注释(Comments) 特征 注释本身并不是坏事.但是常常有这样的情况:一段代码中出现长长的注释,而它之所以存在,是因为代码很糟糕. 问题原因 注释的作者意识到自己的代码不直观或不明 ...

  4. 深入理解JavaScript——闭包

    跟很多新手一样我也是初入前端,对闭包的理解花费的时间和精力相当的多.效果也还行,今天我就来根据自己的理解细致的讲一讲闭包,由于是初入学习的时候不免有一些弯路和困惑,我想信这也是很多跟我一样的人会同样遇 ...

  5. C# 文件下载 : WinINet

    在 C# 中,除了 WebClient 我们还可以使用一组 WindowsAPI 来完成下载任务.这就是 Windows Internet,简称 WinINet.本文通过一个 demo 来介绍 Win ...

  6. Lua 安全调用 metatable 的简单应用

    事情的经过 我们的项目中存在好几个战斗界面,不过界面中的内容略有不同.跟同事出去吃饭的时候,他问我.我们现在的战斗界面.有很多是重复的,但是也有偶尔几个地方不太一样.我在战斗过程中驱动这些界面的时候. ...

  7. 三个linux系统共存,修改默认启动

     一个mint,一个ubuntu,想要默认启动ubuntu,那么咱们这么来:修改启动顺序,我们需要修改Ubuntu的GRUB配置文件.使用常见的编辑程序如"gedit"就可以很方便 ...

  8. mysql技术点1.-----------查询当天的所有数据

    select xs.* from xn_supervision xs where  xs.task_type="+taskType+"  and  xs.create_time&g ...

  9. Hibernnate延迟加载策略(这么详细你还看不懂)

    好久没有认真写过博客了,今天就好好的写一篇吧!!!!!!!!! 当Hibernate 从数据库中加载某个对象(例如:Dept对象)时,如果同时自动加载所有的关联的某个对象(例如:Emp对象),而程序实 ...

  10. Oracle Sales Cloud:管理沙盒(定制化)小细节2——使用对象触发器更新数字字段

    在上一篇 "管理沙盒(定制化)小细节1" 的随笔中,我们使用公式法在 "业务机会" 对象(单头)上建立了 "利润合计" 字段,并将它等于 & ...