前端之web上传文件的方式

 

前端之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之前端之web上传文件的方式的更多相关文章

  1. 前端之web上传文件的方式

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

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

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

  3. 小白向：web中利用request.getPart()上传文件到服务器

    被文件上传弄得焦头烂额的一天,果然web中的路径和各种设置真的好讨厌= = 下面是超级小白的.及其简约的“详”解 1.明确目的: 用户将 1.txt 文件 上传到 服务器(web工程下的某个文件夹)中 ...

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

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

  5. 前端使用nginx上传文件时，进度获取不对

    在使用iview时,上传文件获取进度时onUploadProgress返回数据不对. 原因是开启了nginx代理,本地上传时先传到本地nginx然后在传到服务器,导致获取进度不对 解决:在nginx的 ...

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

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

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

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

  8. ajax异步上传文件FormDate方式，html支持才可使用

    今天需要做一个头像的预览功能,所以我想到了异步上传文件. 总结几点: 异步上传难点: 文件二进制流如何获取 是否需要设置表单的头,就是content-Type那里.异步,所以无所谓了吧. 其他就差不多 ...

  9. 本地向服务器上传文件的方式-FTP工具上传

    笔者负责的一个研究生会的项目,向服务器端传项目代码,用到了FTP工具,这里总结下: FTP方式的步骤: 1,服务器端配置好FTP,(若没有,可网上下载一个服务器端安装的FTP).停止服务后,可以配置账 ...

随机推荐

  1. NagiosQL 跨站脚本漏洞

    漏洞名称: NagiosQL 跨站脚本漏洞 CNNVD编号: CNNVD-201312-158 发布时间: 2013-12-11 更新时间: 2013-12-11 危害等级:    漏洞类型: 跨站脚 ...

  2. Git submodule实战

    http://blog.jqian.net/post/git-submodule.html 使用git管理的项目开发中,如果碰到公共库和基础工具,可以用submodule来管理. 常用操作 例如, 公 ...

  3. 【转】Beyond Compare for Mac中文版震撼来袭！-- 不错

    原文网址:http://mt.sohu.com/20160329/n442685522.shtml Beyond Compare想必大家都知道,它是一个专业级的一个文件对比工具,由于工作原因,我们会经 ...

  4. 多线程归并排序（摘自githhub）

    package com.rationalcoding.sort; import java.util.ArrayList; import java.util.Arrays; import java.ut ...

  5. 2014年Tizen开发者峰会上海征稿启事！

    本次征稿面向大中华用户: “Tizen开发者,应用程序开发人员.isv平台设计师.运营商.厂商.硬件厂商.软件厂商,开源爱好者,和从事Tizen的工作人员” 2014年Tizen开发者峰会 这一次,亚 ...

  6. Mac IDEA快捷键积累

    切来切去:Ctrl+Tab 在打开的不同类中切换来切换去 完美代码结构:Alt+Command+L 不同编辑点跳转:Alt+Command+↔️ 快速重写:Ctrl+N 快速选择代码:Alt+Shif ...

  7. 群赛 ZOJ3741（dp） ZOJ3911（线段树）

    zoj3741 简单dp.wa了两个小时,中间改了好多细节.后来还是不对,参考了别人的代码,发现一个致命问题,初始化的时候,不是每种状态都能直接达到的.初始化成-1. (题目有个小坑,0<=L& ...

  8. Android文字的阴影效果

    <!-- android:shadowDx 阴影的水平偏移量 即往右移的距离 --> <!-- android:shadowDy 阴影的垂直偏移量 即往下移的距离--> < ...

  9. JS 创建对象的几种方式

    面向对象就是把属性和操作属性的方法放在一起作为一个相互依存的整体--对象,即拥有类的概念,基于类可以创建任意多个实例对象,一般具有封装.继承.多态的特性! ECMA-262把对象定义为:"无 ...

  10. 横竖屏事件响应（viewWillLayoutSubviews和通知）两种方式

    转载:http://blog.csdn.net/nogodoss/article/details/17246489 最近搞横竖屏,获得一些心得,特记录下来. 做横竖屏最重要的是确定横竖屏响应的接口.目 ...