Java服务器版批量上传功能教程

这是一篇技术贴。是我死皮赖脸问夏老师要的一篇专属笔记,所以大家一定要视若珍宝,收藏收藏呀,赶紧掏出你们的小本本。

简介:因为在做项目的时候需要用到批量上传功能,但是网络上的那些上传功能有些仅仅是前端的一个demo,或者是php、.net等语言的上传组件,亦或者因为js冲突等原因导致那些案例在实际操作过程中并不能使用,所以,就写了一套基于jQuery的一个批量上传功能

Part.1 实时上传,无需保存

第一种的适用范围:例如,如果有一个客户信息已经保存过后,需要上传该客户的相关照片,而该照片又对该文件进行关联,此时,就可以用这种方式

局限性:必须依赖已有的关系,就像上方例子,必须要先有该客户才可以,不然无法使用该方法,用专业点的话来说,就是需要外键依赖

首先,需要准备两个JS

导入jsp页面时需要注意顺序,jquery包需要在ajaxfileupload包之前导入,如下图所示

然后写页面样式(样式怎么写,可以随意,如果需要这种样式可以找我要)

Input框需要onchange事件来触发

首先看一下我前端的整体架构

在一个大的div中(class=sweet3_main)有两个小的div,第一个就是上传框,第二个就是用来展示图片的,所以,基本上,我们都是在操作第二个div

(注:那个标签不用管,那是我回显时使用的)

然后就要开始写js,js实际分为两步

第一步:前端规则校验

(也就是说只准许用户上传图片格式文件)

第二步:前端校验成功,则使用ajax异步的上传到服务器端

(注:一张图截不全,用两张图分开截取)

前端完成后,开始写入后台代码

其中图片的虚拟路径,已经在百度富文本编辑器中讲到过,此处就不做过多描述

此时,无需保存的批量上传完成,注意,在上传完成图片后,要顺手保存到数据库中

删除功能(必选)

在回写的时候,我顺手把delete事件添加了进去

那么删除就是将该图片的id传递到后台,然后后台删除成功后,前端使用jquery的remove方法,将该图片给删除掉,这样,就可以做到无刷新,进行上传和删除了

服务器需要的回显功能

上传功能:和之前一毛一样,代码都不用改

删除功能:和之前一毛一样,代码都不用改

Part.2模拟网络上的批量上传,需要保存

该种方式和第一种方式基本类似

区别一:

图片在上传完成时,并不保存到数据库中,只是将图片的路径传回前端,并放入hidden表单中,其中该表单的ID命名是按照我自己设定的规则来的,你们可以自行设定规则

区别二:

此处上传图片下面并没有保存到数据库的语句

至于取值,则是直接获取name就行了,但是注意这个name是一个String类型的数组

删除图片(可选)

和之前删除类似,但是是直接

就可以了,不需要其他操作,过程简单暴力,代码就这两行

服务器需要的回显功能

此处需要注意本地图片和服务器回显图片的区别

本地图片就是指点击上传按钮后,看到回显图片,但是没有点击保存按钮

服务器回显图片就是之前保存过的图片,再次显示出现

上传功能:还是正常上传

删除功能就要做一些区别了

可以这么做,回显图片,在页面循环回显时,给他一个js方法

本地图片在点击上传图片,在js里面拼接时,给他另一个js方法,两个js方法互不干涉

其实也就是各自复制之前的js的删除代码即可

笔记是不是很详细捏

不懂的可以问夏老师哦

还可以通过公众号来询问哦

会一一解答的哦

撤了 拜~

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180809G0B5C700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券