00:00
嗯,是这样的,就是我们从网上找的这个多图的上传预览的这个插件呢,并不符合我们现在要求,因为我们本身想做的呢,只是让他能够预览,同时这个图片呢,是随着当前的表单提交在后台进行处理的,那他们好多呢,都是就是要么只能做预览,要么呢,就是预览完成之后要用二点格斯,然后把这个数据提交,对吧,也就是他要做上传,所以呢,我就把这个方法重新写了一个哈,呃,用了之前的那两张图片啊,那两张图片啊,大家可以来看一下基本的这个。呃,一个效果哈,呃,我这个项目在就是这个这个案例哈,它在使用的时候非常简单,你看一下啊,首先第一个导入一个CS,就是我写的导入一个几块,这个大家都知道对吧,那么我最把重要的那个GS文件呢,都封装到这里边去了,对吧?然后你用的时候怎么用呢?把这一段代码复制走就行了。把这一段代码复制走,然后这个ID不要轻易改,如果你改了,如果你改了好这个位置对应的改掉,听到了吧,然后呢,这个里边什么都没写,它是空的,然后呢,你需要在这个调用这个对象的时候说明几个参数,第一个是你当前类是什么,一般就不推荐你改了,好吧,第二个就是你要有几个图片的上传文件,比如说五个或者是三个,明白我的意思吧啊然后呢,你的这个图片的就是提交的名字是什么pic,那你默认如果你改成pic,那么你在后台接收的时候是不是也是pic接收啊,懂我的意思吧,也就是咱们那个input里边的那个名字,听懂了吧,其他的参数我们并没有设置波多的哈,然后呢,实例化一个对象之后,调用这个方法,他就会帮我们去创建这样的一个界面。
01:36
这个界面呢,看起来没有有之前那个就是更合理,它那个是你点一个出现一个是吧,我嫌那个麻烦,所以就直接你写几个,他就有几个,比如说你这个位置写三个,那这个位置来刷新,它就是三个明白我意思吧,你写五个,它就是五个明白我的意吧,好,那么写完以后注意在这里选择选择图片,打开这张图片能预览懂我意思吧,然后你可以选择,每一次只能选择一张图片,然后你可以多选择几张。
02:03
啊,都写自己张看到了吧,然后呢,如果这张图片不高兴,你可以把它关删掉,明白了吧,删掉啊,但是这里我们并没有写换顺序,听到吧,并没有写换顺序序啊,换顺序的话就是弄一个那个叫什么来鼠标按住,然后移动拖动的把他们的顺序换一下就行,我这里没写哈,对,然后呢,这个位置还可以再重新上传,反正他一共就十张。就是你一开始定义的是几张,它就是几张,懂我的意思吧,那么注意我这个里面呢,呃,这个里面呢,大家可以看到它里面的标签的都是全部是自己创建的,那非常简单,就是第一个创建了一个item,看到吧,在这个标签里面啊,在这个这个这个image box里面啊,创建了一个item,一个div显示这个背景啊同时啊,同时这个里面呢,还有一个。还有一个啊,我们看到它怎么这么多位。这样我删掉就行,删掉就行,这是一个点位啊,这是一个点位。太多了。然后往下走,往下走啊,它里边有个image子,看到了吧,隐image子就是这个关掉的这个图标明白了吧?啊然后呢,下边这个是input input我把它隐藏掉,懂我意思吧,你只要不动它就可以了。
03:11
啊,你在这里设置的这个叫,比如说叫PCS,那么如果名字内幕名字叫PCS,那你看一下啊,你在创建的时候,这个元素的名字就叫,看下面这个。看了吗?这个名字指标懂我的意思吗?啊,样式呢,我也并没有做太多的控制啊,太多的控制大家可以都呃,这个样式应该也都能看得懂啊来这里面,呃,这是我的3S文件,打开看一下,基本上就给他设置一个普通普通的一个宽度,当然这个宽度在GS里边也做了调整哈,然后呢,还有一个就是他的那个UR的图片啊,这个图片是哪个嘞。啊,这个图片是背后就是你看到的这个个这个这个这个这个背后是一张背景图,明白领导啊,也就是说你到时候用的时候调整两个路径,一个是他,一个是啊,另外一个在那里,在GS啊,在GS里啊,打开看一下哈,这个GS在哪呢?就在这个地方方,你轻易的不要动这个代码,你要动的话改哪个位置哈,你需要改的就是这个位置,你妹子图片地址。
04:11
懂我意思吧,如果我们把它加载到项目里边,这个内容需要改改,其他的不用动了。没白问是吧吧,我把这个重新封装了一下,重新写了一个啊,其实早泄完了,我想把它封装成对象,然后变得方便一些,所以又又花了点功夫啊对,呃,这个呢,算不上特别好,但是他基本上完成我们的主要功能,因为它满足我们的需求,听到了吧,表单提交我告诉你哈,表单提交的时候,你在这个位置传递的的名字叫S的话啊,叫的话你那边用request点点get历史,我们昨天说有个方法叫get list了。一样可以获取,然后选择这个叫来获取,听懂了吧,那边得到的就是一个列表,表就是一个列表,然后用循环的方式把它上传就可以了,懂我的意思吧?啊,其他的我就不说了,反正这个差价告诉你怎么去用用啊,你要想研究的你就研究研究好吧啊,插件告诉你怎么用,然后这个剩下的在项目里怎么用,你就拿过去自己改吧吧,好吧啊这个我写的这个样式,反正功能上基本上应该是没有问题的哈,但是样式有可能拿到项目里边,可能有点丑,你们自己调。
05:16
可以吧啊,反正就是CS和GS,他也不难,你看呃,GS几十行啊,不到50行是吧?啊CS230行,对也很简单的,就几个元素的基本样式控制,知道吧,你回头自己看着自己调就行了了,可以吧,然后用的时候就把这个代码咔自己复制走完,想搁到哪里就把它这个代码放到哪里就行了。可以好好。行了,那这样的话省得咱们来回找,哈哈。费劲,他们写的都不符合咱们要求,因为他们俩搞前端的人不搞后端端。知道他想的是把这个文件上传就完事了,但实际上没想到,文件如果过多的上传还有个麻烦,你万一他这个表单不提交了,你这个图片是不是已经上传了?
06:00
对吧,而且他在这换来换去,他换了100张图片,那这100张图片全部上传到服务器了器了。没有是吧,资源极大浪费。明白我意思吧,对,就很不方便这个东西,要不然的话,后台如果要这样做,后台又想避免这个浪费资源,怎么办呢?你还得我还得检测你是不是提交了,如果你提交了,我把原来那个文件里边其他的文件全都删掉,这就很很麻烦,你知道吧,所以就不如在一开始只是做一个预览,然后随着你表单提交把真正的文件。提交在哪里,提交到咱们这个。呃,这个后台,然后进行处理知道吧,当然我这个是不能换的,换这个图片是不能换,但虽然是不能换,但你可以删掉,重新创传一张。懂我意思吧,你可以删掉,重新上传一张。明白我的意思吧吧啊,因为原来想换,想换的话就没法删删。想删就没法换换知道吧啊,我也没懒得去琢磨了,就就就基本的功能把它实现了就可以了,好吧啊,你用的时候呢,别忘了啊,别忘了把这些呃,把这些直接把这个文件夹放到咱们的静态文件夹就行了。找个静态文件夹放一下,其他的不用动知道吧,然后把这个呃呃,这个这个里边的H代码复制过去,剩下的从这个路径开始导就行了啊,主要就是图片CS和GS的路径,其他的没什么,然后你可能调整的就是嗯,显示的那个样本,其他的不用动了,可以吧,嗯,行了了,那就是这个差价给大家说一下哈,怎么用,你下课那个自己琢磨琢磨。
我来说两句