表单附件上传与删除思路梳理（含前台代码）

原创

于 2018-05-24 19:17:48 发布 · 4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#SpringMVC #文件上传

本文详细介绍了使用jQuery File Upload组件进行文件上传的前端实现，包括上传前后的界面设计，上传过程中的进度显示，以及文件删除功能。通过设置data-url指向SpringMVC处理器，实现文件上传，并在上传成功后显示文件信息。文件删除通过ajax触发后台删除操作，恢复上传状态。文章还提供了一小段后台文件删除的代码示例。

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

附件上传是进行表单操作时经常会用到的功能，下面详细介绍前台文件上传代码的思路，并附最新代码。

首先在前台我们使用的是jQuery的File Upload组件，该组件以jquery的ajax为基础，支持多文件的上传、取消和删除，在使用该组件前，需要引入以下文件：

<script type="text/javascript" src="/${res}/js/jquery-1.9.1.min.js"></script>
<script src="${base}/res/common/js/jquery.ui.widget.js" type="text/javascript"></script>
<script src="${base}/res/common/js/jquery.iframe-transport.js" type="text/javascript"></script>
<script src="${base}/res/common/js/jquery.fileupload.js" type="text/javascript"></script>

在设计文件上传时使用按钮点击上传，同时上传的过程中显示上传进度，上传成功后显示上传文件的名称。当然，对于不同的需求还可以设计更为丰富的上传界面，但核心机制是相似的。

上传前：上传后：