jQuery-File-Upload(blueimp)爬坑指南

最新推荐文章于 2023-04-03 15:02:10 发布

原创

最新推荐文章于 2023-04-03 15:02:10 发布 · 2.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

本文详细介绍了使用 jQuery-File-Upload 插件进行文件上传的配置和实现，包括基本的文件上传、进度显示、队列模式、图片预览等功能。在实现过程中遇到的问题和解决方案，如图片预览的 canvas 实现和进度条不更新的错误。文章还提供了 Demo 仓库链接和作者博客地址供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当你无法分辨长的很像的英文的时候，能够拯救你的就只有一遍又一遍的试错了。

前言介绍

最近项目需要一个页面单独上传的功能，要求页面能够做到多文件上传。于是便去寻找 ajax 上传文件的插件，找到 github 排名最高的 ‘jQuery-File-Upload’ 插件，开发者是 ‘buleibm’。一开始还没想过这是谁，后来看到越来越多插件的作者是 ‘blueibm’，一想，原来这货是IBM啊 Ψ(￣∀￣)Ψ
给出官方文档地址：https://github.com/blueimp/jQuery-File-Upload/wiki

简单开始

只需要简单的 ajax 上传功能很容易配置，首先，引入必要的js文件

<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/blueimp-file-upload/9.17.0/js/vendor/jquery.ui.widget.min.js"></script>

<!-- 可选，用于兼容古代浏览器 -->
<script src="//cdn.bootcss.com/blueimp-file-upload/9.17.0/js/jquery.iframe-transport.min.js"></