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的删除代码即可

笔记是不是很详细捏

不懂的可以问夏老师哦

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

会一一解答的哦

撤了 拜~