zoukankan      html  css  js  c++  java
  • 前端JS之HTML利用XMLHttpRequest()和FormData()进行大文件分段上传

    用于网页向后端上传大文件

    ### 前端代码
    <
    body> <input type="file" name="video" id="file" /> <input type="button" class="btn btn-info" id="sub" value="提交"> <script> $("#sub").on("click",selfile()) #当提交按钮被点击时触发上传 function selfile(){ const LENGTH = 1024 * 1024 * 10;//每次上传的大小 var file = document.getElementsByName('video')[0].files[0];//文件对象 var filename=document.getElementsByName('video')[0].files[0].name; var totalSize = file.size;//文件总大小 var start = 0;//每次上传的开始字节 var end = start + LENGTH;//每次上传的结尾字节 var fd = null;//创建表单数据对象 var blob = null;//二进制对象 var xhr = null;//xhr对象 while(start < totalSize){ fd = new FormData();//每一次需要重新创建 xhr = new XMLHttpRequest();//需要每次创建并设置参数 xhr.open('POST','/qqq/',false); blob = file.slice(start,end);//根据长度截取每次需要上传的数据 fd.append('file_data',blob);//添加数据到fd对象中 fd.append('filename',filename); //获取文件的名称 fd.append("file_size",totalSize); xhr.send(fd);//将fd数据上传 //重新设置开始和结尾 start = end; end = start + LENGTH; } } </script> </body>
    ##python后端路由视图函数代码:
    
    def qqq(request):
            file_path = "c:aa.txt"
            with open(file_path,"ab") as f:
                for line in request.FILES.get("file_data"):
                    f.write(line)

    欢迎来搂~~~

  • 相关阅读:
    WPS设置去广告
    Android,几款apk工具
    Eclipse 使用
    linux su和sudo命令的区别
    CentOS下安装SecureCRT的sz/rz工具包
    CentOS下安装SecureCRT的sz/rz工具包
    CentOS下安装SecureCRT的sz/rz工具包
    VMware虚拟机上网络连接(network type)的三种模式--bridged、host-only、NAT
    修改CentOS系统的默认启动级别
    修改CentOS系统的默认启动级别
  • 原文地址:https://www.cnblogs.com/dongxixi/p/11007346.html
Copyright © 2011-2022 走看看