本文适用 Layui 的初学者,阅读本文需要具备基础的 javaScript 代码编写能力,需要熟悉 jQuery的使用。通过本文的学习,可以了解 jQuery 是如何使用 FormData 上传文件,并且上传文件过程中是如何监听上传进度,如何取消正在上传的操作。
本文针对的是使用 Layui 的前端框架进行前端 UI 开发的初级开发人员,有助于提高对Layui 提供的基础组件代码结构的认知。
本文将通过原理+示例代码详细讲解上传过程中如何监听进度,如何取消上传操作。支持多文件进度监听,多文件取消上传操作。为什么是 Layui,而不是其他 VUE、Ant Design?其实本文的代码主要是 jQuery,完全可以无缝迁移到其他 JS 的前台框架。使用 Layui 是因为在更低版本的浏览器也能运行。另外,Layui在国产CPU+国产麒麟等操作系统的浏览器中运行效率更高无延时现象。
首先,我们先来运行layui。第一步: 到layui官网下载layui的项目,https://www.layui.com/根据https://www.layui.com/doc/ 说明把代码运行起来。
第二步:咱们开始对\layui\lay\modules\upload.js 进行扩展。默认upload.js是不支持显示上传进度和取消上传的。upload.js打开是这样的,都是混乱的代码,我