89. 尚硅谷_佟刚_JavaWEB_文件上传案例_JS代码.wmv原创

我们还是来看我们先前这个吧，呃，需求第一个需要先来搞这个j query，那停掉，先来搞几宽RY，我把几query拷进来。没有啥啊，就是一个几块的一个文件copy。放进来这个呢，是我们的一个应用，我放到这个目录下APP，好，然后我搞到这个。JSP复制进来这个GS啊，需要我们重新写。好，就要看如来完成close by，第一个哎，我们需要实现新增一个附件跟删除一个附件的功能，这里边这个事儿呢，就要多一些，因为怎么样，我这个时候我实际上是要用这个file upload的主件一次上传多个文件吧，是这样吧，我如何完成一次上传多个文件。

这还是个事儿，好了，那我们这块的话呢，有一个FILE1，有一个DISC1，这个是已经有的哈，我们先来实现这个说我新加一个附件，这是不是个button呢？Button天生就是为GS而生的吧。不加GS是不是没有任何意义呀。于是，首先。先完成这个，来写一个。方式。一获取顶谁呢？

直接来了哈。并为其。为其添加。Click响应函数，这是我们需要做的。啊，第二步是干什么呀？哎，第二步我们看需要生成啥呀，需要生成这个东西。FAIR1，呃，DIS1，然后呢，这些东西都需要生成，我需要把这个具体说应该这样。我把我生成的这个信息放哪呀，放到这个BR的前边。那我需要生成这个东西放到边，放到边的前边，好利用这二。

生成。这个。这个吧，还比较麻烦。来看一下我这个写法来。大家看这是不是二了呀，这是不是三了呀，他也能改。再看一下我的这个工具，开发者工具，我们看一下JS来element打开。这是FILE1没问题，你看这是不是FILE2啊，第四个two吧，啊DC two哈，FILE3，哎DC3是这么一个效果，所以说。

回来吧。然后乘上它，分成以下节点，注意这个数字的变化。OK，然后呢，并把它们。并把他们都。加到这个的前边来吧，我我写个ID吧。等于P加到这个节点的前面。好了，我说呀，我还有一个功能就是删除自身，这个怎么删除啊，加个东西吧，删除自身。

看一下这个来，这个有了，这个有了，我直接在这个D后边加上一个删除。我写个什么呢？写个呃，写个delete。删除吧，删除自己其中。用什么呢，删除。可以删除这个，新建当前吧，当前的和。D相关节点，行了，这是我们结块需要干的事，那考虑下窗怎么干呢？

这块还有一个file number，这个file number的话呢，我们我们先在这放着哈，File number是什么意思的话呢，我们一会我们跟大家说。这怎么干呢？第一个是容易写的，写一个引号，爱的fair点。方式都知道吧，然后的话呢，我需要来新建对应的这个。呃，节点那我怎么加呢？我说我这个节点啊，加到它的前边。怎么加呀？只要你加的就放这个前面来。第点隐色的。Before。加到什么什么前面是颜色的before还是before啊，有两个方法，是不是一个主语，是不是主语跟宾语颠倒那个呀，看看来找到他，我们找到啊，还得看他。

演色，Before before。插入到目标节点，我们直接看它就可以了，P before啊，应该是它吧，是吧？这不是吗？这什么？应该是before，不是颜色，Before，回来吧，Before。然后什么东西这么咸？这么写有点儿意思，也写上。嗯，好好使。有一个问题啊，这肯定是单引号，双引号肯定不行。好在呢，这个家伙可以是，哎，好来一个。

来，再加一边。看完了。还有一删除。啊，写上了试试吧，跑这个。嗯。加好使吧，嗯，用就是爽，一定要有这样的感觉是吧？用解块就是双，你要不用解块的话，这玩意是不是得费死劲了？OK，好，写完这个数字没变呀，那你就搞一个变量呗。

这个每加一个那个变量加一是这样吧，搞一个变量，这个变量应该是一个全局的2A等于二，从二开始嘛，是吧，于是这个值比较闹腾。加I。刚好是那么个机会。个个。有这个，哎还不对吧，注意你看这个一是不是跟它在一起啊，这个单引号需要拿后边来。能理解吗？我们先回来，这个看着有点烂哈。前是这写的吧，现在我需要这么写。多一个加加，哎，这么写吧，拿过来再来啊，他也他也需要写。

加加。No。这样吧，来也一样。再来。掉了。对。A大家。对，而且A加加好，写完再敲刷新。是不是这么一个效果呀，好了，哎，这个删除怎么删呢。这个删除我得加上啊，它要起作用的，一删除的话，我这个当前这个D跟这个file就没了吧，来看这个删除怎么搞呢？那我这里边新加的里边啊有一个删除。

这么加吧。CTRLX。因为我需要为这个删除里边多加上一个功能。放这是吧，这样写完之后的话，大家说我就目前就是这个情况，我如何把这个删除摘出来呀，或者是说啊，我把这个删除摘完之后的话呢，我希望删除有这样的一个功能，就删除当前的这个file以及这个呃，Input。怎么整啊，那就从这个里边吧，这个这个返回值是不是还是这个BR啊。

是吗？这个返回值还是BR，然后的话呢，我们直接把这个八层加上了，我就需要把这个8K取出来，然后去给它加事件写吧，那我如何把这个取出来呀。点。你们先别管别的哈，先看出来好不好，用我一个口账，我来打一个啊ABC。回来再刷新再加。摁错了。坏了没好使。难道没找着吗？哦，这不对，为什么呀，这个返回值是什么东西啊，这个返回值是不是BR啊，你得是BR前边的BR前边的这个button吧，你得这么写。

BR前边的button，那因前面怎么写啊？BR前边的button off有这么一个方法，我们找找。啊，因为不是最前面嘛，好了，但是呢，是离我最近的一个。RA也可以这么写，Brave边。哎，我是希望他加，因为我当前这个边前面是不是有个边啊，在前面还是这个八吧，OK，再来刷新加好用了吧，好了，我希望呃，它能够把前面这些都删除那。

怎么叫都删除啊，大家看我删的话呢，我得删到下一个边之前吧，过来看来我要删除好多哈，我要删除。获取。这这个前边的是个什么呢？是个input。这一个。这是一个哈，看这个前边的这是个input，这是一个input，然后还有一个Dis的。那我们能不能给他一起给他算一下呀，你这样算太麻烦了呀，大家说有办法吗？

对，这个时候的话呢，你把这个放到一个div里边就好一些，要不的话它度不是一块啊，懂这个意思吗？我们希望整个这个东西啊，是一个块不就好了吗？是吧，于是呃，这样来写。这样一写，看着div。这也加上一个div，道理非常简单，我就是希望这样一删的话呢，删这个div就可以了。于是。点什么呢？点R当前的parent是不是个div啊是吧，点好了光这样还不够，我还得使那个I减减吧，那一会我还得用，于是按一下。

担心。加加山油好用哪个？哪个不对？我先写个乐克来，写个ABC，再写个乐，写个他。This，是这个button。A的负节点。是IV没啥错啊，点点看对不对啊，发新金加。哎呦，都没好用，确实是不行，嗯，哪个是B哦，Button前边不是B哦，这个错了是吧？哦对，这个时候的话呢，我这个前面就是div了是吧？啊那好好办div然后怎么了，然后这个是find了吧，Div去找去找八分子节点了样来。

刷新再加，好用的没了再加，还是二吧，行了，这样一个功能就实现了，保存看一遍来。加加。但是啊，也有问题，删删这挺好吧，加加对我删这个是这么办。我得重新排序吧，是吧是吧，就是我每删一个我得重新排序吧，那挨减减光挨减减呢还不行，我必须得把。

这里边所有的这个什么呢？这个什么FILE1呀，DISC1呀，FILE3呐，DISC3呐，还有什么就是凡是有数字的地方，这个顺序啊，都重新的排一下。哪些哪些有数字好几个地方呢，四个地方都都要我们写的不正规哈，这要是放在一个table里边的话，是不是就容易操作了，懂那意思吧。放在一个table里边，我们现在的话呢，不正规在哪呀，不正规就是它是这种，大家看这是不是散的呀，放在一个table里边就容易写了，Table里边它是不是一个TD呀，它是不是一个TD呀，那样好写，那我们让它正规一点吧，用这样写的话太费劲了哈。正规一章怎么写呢？这么写来。对，不太费劲哈，第二不是要求吧，要求完美的人是吧，我们希望写的更好一点，所以说就要痛苦一点啊，非常一。

你看这个时候TD。这时候它是一块一块的，对。CTRLC。然后的话呢，又是一组TR是一行。两行两列是吧，来，再来。然后呢，E1负值。嗯，话说的是吧，这个时候前面写的呀，都白写了。拿掉快对第2TD。

啊，两个，一个是新增一个一个是删除。CTRLXCTRLV。下来CTRLX。去掉。OK，这个时候就不用套div了，这玩意你没法套div，你看这个时候就整齐了，加也好加，这个时候我们来写一下吧，刚才那个就干什么是吧，我们有哦把这把这个先删了吧，就不行了啊。嗯，我们重新写吧，哎，我们有这样的一个这个页面，现在的话呢，我再来执行这个添加这个就要容易的多了，因为这个时候怎么样，我可以精确定位，刚才那个是闪着的，所以说为什么要给大家编学号，为什么要在放的时候，你说你是几单元几户，我直接定位是吧，比方就比方说你要这个送货物，比方说我们在京东买东西都有个什么什么特点啊，准确的一个地址，比方说哎，你是在这个玉龙教育园哪个楼的哪层，几零几人一下就找着了，你就告诉我，我在育龙教育园，现在我们就是这样，但玉龙教园还好是吧，有个电话，一挂电话，然后我们出去拿这个还行，他就告诉我，我在育龙教育园。

啊，如果说我在玉龙教育园动美甲咔咔一说，然后这哥们开始找，那就很费劲，刚才我们就是这个地，你现在的话呢，我我我每个我都放好了，就好写了，那我们再写一个吧。井号的达click。

Function。哎，还是要写的。没办法，这个时候的话呢，我就直接在这个上面加吧，来加个ID，这个ID呢，是后面这个发米哦，发米的不行，艾特这样啊，是我们这个之前加个TR，大家看不是加一个TR，是加两个TR吧，加一个它再加上一个它不就可以了吗？一定是加在这个的前边你说什么的两个。两个啊啊啊，那那那那算了吧，不要了。不要的话好在哪呀，我这是一个button就可以了，来，嗯，这点它是谁呀，ED吧，来带点PART吧，然后呢，比four加一个。

好了，这个时候的话呢，我想给他加上一个，他那一模一样啊，是都加吧，这样省事。都加都加的话呢，需要需要格式化一下，我们拿到这了来。这个位置一会儿需要注意哈。是一个。又是一个，其中这个需要用单引。

因为我整个那个是在双赢里边，你说C。我注意先加谁呢，都加对。CTRLC拿过来。Before。周围这个没完哈，这个I先加上来。哎，好了，再来这个位置。再来。

I。C。哎。再来加号给下边。还有的是他，哎写完了，写完之后的话呢，我们先加看它好不好用，那去掉。删除那还没加对来先看这个。这个好用吧，很整齐好了，然后的话呢，哎哟，哀加加没写吧，嗯，对，每写一次，哎，大家再来。

按错了，是这样吗？好了，那下边的话呢，我来加这个删除，大家就是对这个删除挺感兴趣的哈，那我们就加上它来删，加到这button。加一个删除保存再来看。抓心加加加，是这个吧，现在呢，我本身想实现删除这一个TR是很容易的，我们想删完之后它的排序是这样吧，那排呗，来，然后我获取这个删除，这个时候我可以为这个删除新加一个事件。

这个不一样了哈，获取删除按钮，新添加的新。添加的。删除，乃至于你也可以为所有的都加没问题，我们希望说我先添加的，新添加这删除按钮，我怎么搞啊。新添加的这个时候的话呢，我都可以给他加个ID，也省事。哎，比例对呀，这样写不行啊，我是不是有哎呀。

那意思吧，这样我是不是好定位啊，我就这么个意思啊，好了，这个时候不过一会变的时候，这个I变的要多一点。行，来吧，删除瞅瞅来。顶号。我需要再点它的时候给他加没问题，新加这个吗？你他。A的值啊，得是以前那个值。是吧，那是以前那个值啊加。A减一就是它。点click，哎，我们先让它实现基本的功能，把那个TR删除，TR怎么删呢。T，嗯，这么写吧，来，这是那个阿怎吧二呢，是谁啊？ED吗？对吕木OK点山看着专心。

加加。我删的好像不彻底，两个TR吧，不能删一个TR吧，我加的时候加两个呀，我得删两个TR。删两个tr this parent的，那这么写吧，这个TR啊，这样一个兄弟也需要被删除，或T等于他，然后写吧。DR的上一个DR兄弟。

在T点是这样吧，再走。我以前写过这个，我觉得好像没这么麻烦，这个写的这么麻烦是不是可以啊，好了，下一个对I重新排序，对那个I重新排序，都排吧。都排，怎么排呢？一对一对的，为什么是一对一对的，你看我这是一组吧，是吧，我得这么排，那于是获取所有的TR。来吧。获取所有的TR，但是啊，Note怎么样，不是最后一个吧？

Ask。R。大家看。获取所有的加，包括新加这个，但不能是最后一个，因为你最后一个是五算的，然后除了最后一个以外，一定是偶数个班，一定是偶数个吧，嗯。嗯。这儿呢，然后这完获取完之后的话怎么整啊。嗯，大家说我把这个获取完了，获获取完这个TR了，我们现在呢，我们得看是吧，这个TR啊，想想哈，我得使。

每一对TR的第一个，这个变直，这个也变直。T的文本倒是行是吧，但是问题是我一下子的话呢，我搞到了两个TR，我用这个验证非常好，行吧。大家想一想，我如何来进行排序啊？就是说我需要把这个值的话呢，给他重新的治一下，怎么治，我已经搞到了，这不是最后一个T，然后的话呢，我也可以进行便利。

来吧，然后还有一个特点，就是我必须得把这个我这样写吧，来给你写这个写成class b哈，加个fell，这个写个class，这叫D吧，这样的话我是不是我是不是可以分开对待啊，这样写的话呢，这个事就容易了。你这么写比较比较麻烦，这么写来。点什么的T啊，点field，哎，这回好点fair each。就容易了哈，我使这里边儿加上一个in X in X是正在变历的那个数，然后呢，我使它的来大家看这来。

S点。去找一个节点，这个节点叫TDTD啊，Text变成。加index加一，Index从零开始加一。好了，我们先看这个表面上好不好使，搞一搞呀，哎哟，咋这样了呢？加不是这个。好，我删一个。是不是搞出来一个FAIR1呀，对呀，怎么搞出来的，我把以前的text给它恢复，我们看看啊，以前的find o我应该是犯的第一个T地吧，对吧，你看我find的是不是好多个T地啊，Find的第一个体地来怎么写吧，First吧，第一个题来看。

刷新加加OK，山怎么整来山？这个一这一本来就不变是吧，来那我再刷一下子，我看看加加加我删他这个没有起作用，嗯，去年的时候咋了。

啊对，说的对，添加的时候是不是没写这个属性啊，Class这说的很好啊，什么呀，Fail就fail吧，这个class叫。说什么呀D啊，这个可以还有啥。有了再刷，再加再加再加删一个试试。对吧，二三嘛，这没改呢嘛，这没改呢，来吧，这就可以了，后边是不是同样同样道理啊，但是这个呢还没完，这个光是它还不够，我们还得还得改什么呀，还得改他来来吧帮。

主吗来，看来这个呢，还得再改，呃，一改了我还得改这个FAIR1，这是第二个TD来last不是文本了吧。呃，他的什么呢，他的。At tr什么呀啊。Name属性值变为。加in加是这样吗？没错，好，那我inex加一，我既然需要常用的话呢，我就写一个吧，II不好，嗯，等于index加一，OK加N。

也是丹恩。好了，看还有别的吗？没有了吧，就完事啊，这个是不需要加的，那同样再写一个。必须分开对待它不一样，就B吧。这个name是DCN吧，行了，于是。CTRLC来我们需要看它哈，看它加，哎摁错了吧，加咋这效果呢，他在这里边还有个什么功能啊，在这个Chrome里边还有一个提交的功能，我不我得给他return false。

过来。什么意思啊，取消默认行为吧，再来刷新加加加加，我得看一下子这个打开。TR打开大家看五吧，没问题，主要是看这个名对不对哈。再打开，再打开是五吧，哎很好，好了，我删一个1234没问题吧，看这个值对不对哈，删除四四，注意看删除不行啊，我得看它呀。不能刷新，一刷新就没了。TOK，看这是四吧，再找一个。

二打开是二吧，OK，这样的话呢，这个就写完了，这就是JS，大家可能有些同学都快睡着了是吧，嗯，这这个这个JS，这个JS还还不算复杂，我们后边的话呢，会写更复杂的JS，做前台的这个出台不是那么容易的是吧，以前我都是坐着讲课叫坐台是吧，现在我站着讲课叫站台，有一天我出去讲课就叫出台，现在呢，我们写的是前台，一会的话呢，我们写后台，反正人生啊是跟这个台分不开的是吧，我希望大家不要出台哈，出台这个事情还是比较危险的，你要实在要是想出台的话，你可以问问我一些经验什么的是吧，包括如何收费是吧？嗯，行了，到这块的话呢，我们先来个这个GS，这个GS写的目的点在哪呢？因为我们把整个这个文档结构啊给改了，以前那。

的文档结构是有问题的，就那个散落的去识别太麻烦了是吧，也的确是应该带一个文档结构好了，第一个环节，第二个环节就是来需要进行验证，这个验证如何来写，又是比较麻烦的地方，这个的话呢，我们下节课我们再说，下课先休息一会儿吧。