jsp 多图片上传

最新推荐文章于 2022-05-17 09:27:54 发布

张家强全栈

最新推荐文章于 2022-05-17 09:27:54 发布

阅读量1.5k

点赞数

本文链接：https://blog.csdn.net/zhangjiaqianghh/article/details/109576727

版权

本文介绍了一个在Java Web中实现多图片上传的需求，包括jsp页面、JavaScript方法和后端Java代码。通过使用FormData对象进行文件上传，同时支持图片预览、删除和回显。在后端，使用MultipartFile处理文件上传，并将图片信息存储到数据库。

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

今天来个新的需求：将之前的单图片上传改为多文件上传。

例图：

此需求提出就需要将之前的存储方式做下改变，由图片id变为图片id1,图片id2,... 。在存储图片时需要将没一个图片进行保存。例：

主表保存方式：

图片表保存方式：

下面看一下jsp页面与js方法

代码：

<td align="right">
                       <label class="Validform_label">
                           合同图片:
                       </label>
                   </td>
                   <td class="value" style="height:40px;">
                       <span class="Validform_checktip"></span>
                       <div class="col-xs-10">
                       <input type="hidden" id="fileid" name="fileid" value=""/>
<label style="border: 1px dashed #dbdadd;padding: 6px;background-color: #80808033;">
<input style="position:absolute;opacity: 0;width: 135px;height: 35px;left: 5px;" id="choose-file" multiple type="file" name="file" accept="image/gif,image/jpeg,image/x-png,image/png" />
选择图片
</label>
                                   
<div class="file-list" style="display: inline-block;width: auto;position: relative;top: 7px;">
</div>
</div>
                   </td>
                   <td align="right">
                       <label class="Validform_label">
                           工作许可证图片:
                       </label>
</td>

JS方法：

   /*
   * 保存
   */
   function doSave(file){
           //使用formData发送ajax请求，注意[0],发现很多博客都没有写
var formData = new FormData($("#formobj")[0]);
//删除formData中的File对象,设置将我们需要上传的fileList中File对象
formData.delete("files");
formData.append("files",file);
           //添加需要删除的已上传的图片的id，后台解析删除
//formData.append("removeList",removeList);

$.ajax({
url : "teacherController.do?uploadd",
data : formData,
type : "post",
dataType : "json",
cache : false,//上传文件无需缓存
processData : false,//用于对data参数进行序列化处理这里必须false
contentType : false, /

最低0.47元/天解锁文章