html使用ajax实现文件分片上传

2023-11-04

在实用中,经常有上传文件的操作,但是上传的文件有时会很大,所以需要将文件分片,然后一片一片上传到后台。
其实前端写法跟普通的文件上传没有区别,只是需要把文件切割一下就好了。
下面是一个例子:
代码
ajax文件上传
结果:
ajax文件上传
js部分:
ajax文件上传
获取文件后就开始分片上传,有两个参数,第一个是文件,第二个是从第几片开始上传,当然是第一片
下面是PostFile的JS部分啦:
ajax实现文件分片上传

ajax文件分片上传
可以看出,其实就是普通的文件上传,只是获取了文件的大小,然后用slice方法把文件切割,
参数用index1的原因是我用node作为服务器,可能是index与什么系统内部的变量冲突了,使用不了index,所以换了一个名字,这样,后台接收到,判断一下当前是不是最后一片,不是则返回status = 201就可以递归使用了,
如果是最后一片了,则返回status = 200就好了。
剩下的就由后台来拼接组装文件了(虽然我没成功,所以这里就不放怎重组成一个完整的文件了,不过我用这个方法给写Java的后台同事试了一下,可以成功,也就是前端方面是没有问题的。后台知识的学习还是得加把劲)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

html使用ajax实现文件分片上传 的相关文章

  • element-ui走马灯实现图片自适应

    elementUI走马灯实现图片自适应 等比缩放 使得图片缩小不挤压 放大不拉伸变形 解决方法的原理 监听屏幕视口大小如果 resize 发生改变了 就获取图片的高度height 然后渲染到页面 ElementUI 地址 https ele
  • css set a4 paper size

    HTML div class book div class page div class subpage Page 1 2 div div div class page div class subpage Page 2 2 div div
  • 原生JS实现拾色器功能

    没事儿干 写一个拾色器 原生 JS 实现 先看效果图 一 写页面 div class circle div circle width 200px height 200px border 1px 999 solid margin 200px
  • 关于标签的 的target属性

    如果 有一个页面上为这样两个超链接 a href http www baidu com 超链接1 a a href http www sohu com target self 超链接2 a 点击超链接1 的时候会弹出一个页签 内容是 htt
  • 在页面中输入上下居中点号(·)

    随便打开一个聊天窗口输入汉字 点 在弹出的选项框中选择 号即可
  • iframe无边框(隐藏边框)

    用css的border none来去掉iframe的边框在IE下起不了作用 将iframe的frameborder属性的值设为no就可以
  • H5存储方案——cookie、session、SessionStorage和LocalStorage

    1 简述 浏览器端存储网页中的数据有三种存储方案 cookie SessionStorage和LocalStorage 其中 SessionStorage和LocalStorage是H5新增的存储方案 而cookie经常同session一并
  • html使用ajax实现文件分片上传

    在实用中 经常有上传文件的操作 但是上传的文件有时会很大 所以需要将文件分片 然后一片一片上传到后台 其实前端写法跟普通的文件上传没有区别 只是需要把文件切割一下就好了 下面是一个例子 代码 结果 js部分 获取文件后就开始分片上传 有两个
  • CSS设置字间距、行间距、首行缩进

    CSS设置字间距 行间距 首行缩进 ps 本人亲测 阿里云2核4G5M的服务器性价比很高 新用户一块多一天 老用户三块多一天 最高可以买三年 感兴趣的可以戳一下 阿里云折扣服务器 字间距 1 text indent设置抬头距离css缩进 即
  • href 属性 和 target属性

  • JavaScript的三大组成部分(收藏)

    JavaScript是一种属于网络的脚本语言 已经被广泛用于Web应用开发 常用来为网页添加各式各样的动态功能 为用户提供更流畅美观的浏览效果 通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的 各位小伙伴在进阶的时候总会
  • CSS3——@keyframe动画的基本用法,常见错误及解决方案

    文章目录 一 基本用法 1 关键帧 keyframes 2 示例 二 常见错误及解决方案 1 keyframes 不能实现突变的状态变化 display替代方案 1 占据空间 visiblity 2 不想占据空间 绝对定位 visiblit
  • 前端新人必看的开发技巧之浏览器控制台

    随便进入一个网页 按下F12 都将看到如下的控制台 一 HTML调试 你可以对HTML标签做任何操作 修改它 移动它 删除它 快速定位深层元素 HTML带来的启发 在网页上抓取想要的图片 抓取背景图片 有些图片是在background im
  • js延时函数

    js延时函数总结 在js中 延迟执行函数有两种 setTimeout和setInterval 用法如下 setTimeout test 5000 5秒后执行testFunction 函数 只执行一次 setInterval test 500
  • 【HTML+CSS兼容性】 li中插入img元素之间存在空隙BUG问题+解决方案 前端零基础必须知道的事情!

    个人主页 极客小俊 作者简介 web开发者 设计师 技术分享博主 希望大家多多支持一下 我们一起进步 如果文章对你有帮助的话 欢迎评论 点赞 收藏 加关注 场景问题描述 环境测试 Chrome Edge Opera FireFox 举个栗子
  • 盒模型BFC渲染机制

    目录 一 BFC基本慨念 二 BFC渲染规则 三 如何创建BFC元素 一 BFC基本慨念 一个块格式化上下文 block formatting context 是Web页面的可视化CSS渲染出的一部分 它是块级盒布局出现的区域 也是浮动层元
  • el-table绑定的数组里面的对象值进行修改时,视图没有更新

    在Vue js中 如果您在对绑定到el table的数组里面的对象值进行修改后发现视图没有更新 可能是因为Vue js无法检测到数据的变化 解决这个问题的方法有以下几种 使用Vue set 方法显式地告诉Vue js数据已经发生了变化 例如
  • 提交表单--get与post方式

    我们经常在网页上输入信息 然后通过按钮提交 有两种提交方式 get和post get方式效率高但安全性低 post是封装后进行提交安全性高 get方式经常用于搜索 查询 post常用与用户注册登陆等 提交表单标签
  • 如何利用JS生成二维码

    问题来源 最近在做一个项目 有这么个需求 通过生成二维码来实现网页的分享 问题分析 脑海的第一反应 当然是用js来实现 自己手写 当然不是 解决方案 使用 QRCode js QRCode js 是一个用于生成二维码的 JavaScript
  • css实现响应式布局

    一 什么是响应式布局 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局 传统的开发方式是PC端开发一套 手机端再开发一套 而使用响应式布局只要开发一套就够了 响应式设计与自适应设计的区别 响应式开发一套界面 通过检测视口分辨率 针对不同

随机推荐

  • python实现svm

    Python实现支持向量机 SVM 转载 http blog csdn net zouxy09 机器学习算法与python实践这个系列主要是参考 机器学习实战 这本书 因为自己想学习Python 然后也想对一些机器学习算法加深下了解 所以就
  • JSP页面中,JavaScript可以使用EL表达式吗?

    JSP页面中 JavaScript可以使用EL表达式吗 答案是可以的 而且用途很大 比如我们做分页时 把当前的页 第几页 pageIndex保存在session中 把最后一页 尾页 endPage页保存在session中 如果是首页 当点击
  • 全网详解 .npmrc 配置文件:比如.npmrc的优先级、命令行,如何配置.npmrc以及npm常用命令等

    文章目录 1 文章引言 2 简述 npmrc 3 配置 npmrc 3 1 npmrc配置文件的优先级 3 2 npmrc设置的命令行 3 3 如何设置 npmrc 4 配置发布组件 5 npm常用命令 6 重要备注 6 1 yarn 6
  • MPP架构

    MPP Massively Parallel Processing 大规模并行处理 面对海量数据和计算时 采用大事化小的思路 对数据进行分割 数据分割后单独存储 数据处理消耗的资源也是相互隔开的 对于MPP数据库来讲 整个数据库由多个完全独
  • 2023计算机毕业设计SSM最新选题之java二手交易平台2ud44

    2023计算机毕业设计SSM最新选题之java二手交易平台2ud44 毕业设计其实不难 主要毕业的时候任务太紧了 所以大家都非常忙没有时间去做 毕业设计还是早做准备比较好 多花点时间也可以做出来的 建议还是自己动手去做 比如先选一个题 这样
  • 目前开源的智能家居服务器,Home Assistant(以下简称HA)是个开源的智能家

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 Home Assistant 以下简称HA 是个开源的智能家居平台 开源意味着可以随便拿去用 而且是安全的 可以把家中的智能家居设备整合到HA中 它能够接入的设备非常的多 小米 博联 易微联 特
  • php 原生发邮件,原生php phpmailer 发送邮件 email

    setmail 查询最新可用的邮件 接受者 查询最新可用模板内容 查询最新可用企业邮箱 发送者 functionsetmail data username 24066 qq com data password ntpcbibe data f
  • UI自动化框架设计

    这个框架的话使用了PO分层思想和单用例设计模式然后使用Python selenium进行UI自动化框架设计 框架目录的结构 二 config包当中的config ini文件主要是用来存项目的绝对路径 是为了后续跑用例和生成测试报告做准备 然
  • Chrome浏览器的options参数

    options add argument headless 无头模式 options add argument window size x format width height 直接配置大小和set window size一样 optio
  • Linux:虚拟机配置免密登录和文件同步分发

    记录下 以后照抄就好了 文章目录 ssh免密登录 SCP安全拷贝 rsync同步修改 xsync集群分发 ssh免密登录 免密登录原理 生成公钥和私钥 ssh keygen t rsa后连敲三个回车 将公钥拷贝到要免密登录的目标机器上 遇到
  • 数据结构与算法期末复习总结

    为了方便复习 下面内容摘自 数据结构期末总结 夏日 blog CSDN博客 数据结构期末 目录 绪论 知识点 习题 线性表 知识点 习题 栈和队列 知识点 习题 串 数组和广义表 知识点 树和二叉树 知识点 习题 赫夫曼树及其应用 一步一步
  • R语言学习—添加回归模型拟合线(一)

    回归模型重要的基础或者方法就是回归分析 回归分析是研究一个变量 被解释变量 关于另一个 些 变量 解释变量 的具体依赖关系的计算方法和理论 是建模和分析数据的重要工具 常见的回归分析模型有 线性回归 逻辑回归 多项式回归 逐步回归 线性回归
  • OpenGL-GLSL语言入门教程(1)

    目录 GLSL简介 GLSL的内建变量 顶点着色器变量 gl PointSize gl VertexID 片段着色器变量 gl FragCoord gl FragDepth 参考网站 LearnOpenGL 参考书籍 OpenGL编程指南第
  • IOS 启动画面和图标设置(适配IOS7 and Xcode5)

    关于IOS程序设置启动画面以及图标的设备目前主要为 IPhone设备 和IPad设备 IPhone启动画面以及图标的设置 目前IPhone的分辨率为 320X480 640X960 640X1136 Default png 320X480
  • HTML DOM 利用下拉框实现网页跳转

  • C语言 结构体

    1什么是结构体 结构体是一种集合 它里面包含了多个变量或数组 它们的类型可以相同 也可以不同 每个这样的变量或数组都称为结构体的成员 结构的成员可以是标量 数组 指针 甚至是其他结构体 2结构体的定义 1 定义结构体的一般格式 struct
  • Kotlin入门-没有分号是个有趣的事情

    前言 第一眼看Kotlin的示例代码 突然发现没有分号 这个事情就值得商榷了 看两个范例 范例一 fun sum a Int b Int Int Int 参数 返回值 Int return a b 范例二 fun sum a Int b I
  • Acwing-对称的二叉树

    除了根节点都有一个性质 自己对应的节点是相同的 并且左右儿子 左右和右左分别对称 即根节点的左右两棵子树 每一棵都是左右对称的 Definition for a binary tree node struct TreeNode int va
  • 后台管理系统UI作品

    最近整理完成一个基于layUI的后台管理系统UI 分享交流 有兴趣的留言哈 演示地址 http roywu888 gitee io git
  • html使用ajax实现文件分片上传

    在实用中 经常有上传文件的操作 但是上传的文件有时会很大 所以需要将文件分片 然后一片一片上传到后台 其实前端写法跟普通的文件上传没有区别 只是需要把文件切割一下就好了 下面是一个例子 代码 结果 js部分 获取文件后就开始分片上传 有两个