多图片传入前后端的处理

最新推荐文章于 2024-09-26 16:39:33 发布

mister代

最新推荐文章于 2024-09-26 16:39:33 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36214218/article/details/80645773

本文介绍了一种前端实现多图片上传的方法，通过监听文件输入变化动态增加文件输入框，并使用FormData对象封装上传数据。后端采用Java处理上传的多个图片文件。

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

前端

</div>

对应的js文件(图片最多传入6个自己根据需求设定)

    $('.detail-img-div').on('change', '.detail-img:last-child', function() {
       if ($('.detail-img').length < 6) {
           $('#detail-img').append('<input type="file" class="detail-img">');
       }

});

var formData = new FormData();
               formData.append('thumbnail', thumbnail);
               $('.detail-img').map(
                       function(index, item) {
                           if ($('.detail-img')[index].files.length > 0) {
                               formData.append('productImg' + index,
                                       $('.detail-img')[index].files[0]);
                           }
                       });

执行对应的页面

后台处理

for(int i =0 ; i<IMAGEMAXCOUNT;i++){
           CommonsMultipartFile productImgFile = (CommonsMultipartFile) multipartRequest.getFile("productImg"+i);
       if (productImgFile!=null) {
           ImageHolder productImg = new ImageHolder(productImgFile.getOriginalFilename(),
                   productImgFile.getInputStream());

productImgList.add(productImg);

写的很笼统主要自己学习的