Layui 文件上传组件扩展

最新推荐文章于 2024-06-29 08:31:59 发布

蔚1

最新推荐文章于 2024-06-29 08:31:59 发布

阅读量2.3k

点赞数

文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/valada/article/details/94420242

版权

本文适合Layui初学者，介绍了如何使用jQuery和FormData扩展Layui的文件上传组件，实现上传进度监听和取消上传功能。通过在layui的upload.js中添加xhr方法，结合xhr.upload.addEventListener监听上传进度，并调用页面传入的回调函数更新UI。同时，通过inst.abort()方法实现上传取消。文章提供了详细的步骤和示例代码，帮助读者理解并实践。

摘要由CSDN通过智能技术生成

本文适用 Layui 的初学者，阅读本文需要具备基础的 javaScript 代码编写能力，需要熟悉 jQuery的使用。通过本文的学习，可以了解 jQuery 是如何使用 FormData 上传文件，并且上传文件过程中是如何监听上传进度，如何取消正在上传的操作。

本文针对的是使用 Layui 的前端框架进行前端 UI 开发的初级开发人员，有助于提高对Layui 提供的基础组件代码结构的认知。

本文将通过原理+示例代码详细讲解上传过程中如何监听进度，如何取消上传操作。支持多文件进度监听，多文件取消上传操作。为什么是 Layui，而不是其他 VUE、Ant Design？其实本文的代码主要是 jQuery，完全可以无缝迁移到其他 JS 的前台框架。使用 Layui 是因为在更低版本的浏览器也能运行。另外，Layui在国产CPU+国产麒麟等操作系统的浏览器中运行效率更高无延时现象。

首先，我们先来运行layui。第一步： 到layui官网下载layui的项目，https://www.layui.com/ enter image description here 根据https://www.layui.com/doc/ 说明把代码运行起来。