day15【前台】项目发布/16-尚硅谷-尚筹网-发起项目-项目信息部分-页面操作介绍

然后这个能跳转到这个页面上啊，跳转过来了。这个下一步。下一步我们是想要去提交这个表单哈。就是点他提交这个表单。看一下我们改好的这个页面哈。这个下一步这个按钮在哪呢？在这儿。它的ID叫submit button。CCCF。啊，在这给他绑定一个单体小函数，哎，这个单小函数呢。这个是干嘛呢？这一部分是有这么个问题哈。我们这个页面上呢，你看。页面上。就这一部分是我们自己写的。啊，这个这个HR标签里边，毕竟本身并没有这样的功能，就这会列出来我们当前的这些个标签啊，当前这些标签它会列出来，列出来以后呢，我们得知道用户呢，他想选中哪一个。

他选哪一个，我们就把哪一个的这个背景和这个字的颜色变一下。就这些也需要写写写样式，这个样式也是原来的这个页面里边没有的啊。所以说你要是用他原来这个页面想写，写成这个的话，那你要写的还挺多的。你还得慢慢自己一点点去调。哎。那这个时候呢，我们一方面是从页面上视觉效果让用户看到它，诶一点这个就变了，一点就变了。而且呢，他选中的这个，我得把它加到一个数组里边。Type I list啊，给加入到这个数组的里边。呃，这是一方面。另外一方面呢，这里边儿以前选中的呢，我要再点一下能把它去掉。诶这就没有了，那么这种呢，就又需要从这个应该是tag哈。从这个例里边呢，再把这一项呢，再给它去掉。啊，就是这一部分呢，给给每一个这东西绑定，单击小函数去做这个事儿，选中就加进来，要是取消选中呢，就从这里边给它去掉。

啊，就就写了这么一部分TS。嗯，所以说呢，这部分是我们自己写的这个t tag ID list呀，这个就是一个我们一个定义的全局的一个变量。哎，在这样定义了一个空的数组，全局的一个变量在后边呢，这个tag label的单击小函数里边去加加减减啊加加减减。然后呢，这边这边加加减减操作完了以后，我们在这个提交表单的时候啊，就把这个呢，便利下取出来它里边的每一个值，每一个ID。呃，生成一个。呃，Input这个就是我们的这个就是。表单隐藏域啊，把这个放到表单隐藏域里边，派一个ID list。然后呢，这边呢，是一个。表单的ID，然后呢，把表单隐藏域给加进来，加到表单里边。

CTRLFCTRLV。就是这个我们这个表单的ID，相当于在表单里边呢，相当于给他写了一个input。Type等于黑的。哎，然后这个内等于。Tag ID的list啊，这个Y6是等于一呀五呀13呀，这些东西啊。就是用GS达到的这么一个效果，让这个标签的ID可以和别的数据一起去提交给我们的这个handle方法。啊，然后最后这边这个数据加进来以后，这个加进来以后我们这边。哎，表单呢，调submit方法提交这个表单，这个表单里边所有的数据呢，就全部一起发送给我们服务器的。就是页面上我们提交表单的有这么一部分这个代码啊，给大家说一下这个是啥意思。那么这个页面上呢，别的都还好啊，你像这个地方我们已经有默认的勾选了啊，就是方便我们测试啊，方便我们测试这边呢，你自己去勾一下啊，就是自己去点一下，点中了就选中了。

然后这个这些都有这个默认值啊，这些咱们不多说了，这有这么一个效果。点这个上传图片这个按钮。直接就把这个直接把这个文件选择框给弹出来。那其实怎么说按钮本身是没有这样的功能的，这个按钮呢？其实按钮它就是一个butter。啊，你看这个按钮哈，咱们看。这个按钮它就是个button，这个button这东西本身是没有这样的功能的啊，它本身没有这种功能。哎，那这个是他这个是怎么做到的呢。在它的旁边有一个表单引，呃，也不是，这不是表单隐藏域啊，文件上传框。这个东西。你去点它，点这个才能弹出刚才那个叫文件选择框，选一个你要上传的文件。

哎，然后呢，我们把这个这个这个东西啊，给它隐藏了啊，你看style display now把它给隐藏了，让你看不到，但是它是存在的。啊，你看不到它，但是它是存在的。我们点这个按钮。相当于啊，我们点这个按钮，经过用一个小技巧说，让这个相当于点了这个东西。点了这个文件上传框，就会弹出这个选择框。这个是怎么做的呢？看一下啊，看一下它的这个ID是啥。呃，这个叫upload head。就是这个ID哈。他前面加个井号吧，要。给他绑定单选数，然后用这个呢，去定位到我们文件上传框的文件上传框啊这个input。然后呢，叫他的click就等于点了一下这个input这个type，等于file这个文件上传框哈，点一下就能弹出这个文件选择框啊就。

就是可以选文件，这个就叫文件选择框，诶。这里边儿你可以选一个点这个打开。点打开以后呢，下边为了让用户呢，知道他上传的这个文件是什么，下边还做了一个预览。这个预览这个又是怎么做的呢。给这个文件上传框绑定了一个只改变的时间，因为你选定了一个文件以后，这个input啊。Type等于fail啊这个。这个东西它的Y6属性值呢，就会变。这个Y6值一变，就会触发这个值改变的事件。把这个事件对象拿进来。调它的target.files就能拿到这个false啊，去下标零渠道里边的唯一一个文件。哎，然后这个获取这个就这就是这个，甭管这个后边是咋回事吧，就是这个，这是说这是为了兼容两种不同的浏览器哈，拿到这个图片的地址。

图片地址create UR object URL啊，把这个传进来就能拿到它的路径啊，然后这一串呢，这一串是为了找到它旁边有一个img标签。哎，就这个球呢。这个东西啊，它是一个这个img标签。把它里边的这个路径呢给传进来，就能把这个给显示出来了。大概是这么个意思。啊，你这个东西呢，我们是讲了啊，这个其实不是说这个只是说给你简单的给你说一下这个是怎么来的，哎，你要是有兴趣呢，你可以自己试着写一下，你要是没兴趣呢，你就我们就坐享其成就好了啊。这边这个我们反正这个功能已经有了啊，这个功能已经有了啊，你这边这个页面，你拿我的现成这个页面，你这个这个功能直接就有啊，这个就不需要你再去写了。这边这个也是这边详情的话可以选多个。下边会有这个多个显示啊，这个大这个类似这个代码呢，大同小异啊，只不过下边呢是取出来的，是取出来是多个文件啊，便利一下啊，给它放到MG里边去显示。

嗯。这个页面上这些事情都准备好了以后啊，这边数据该填的都填了，点下一步我们就可以去提交这个表单了。嗯，提交这个表单呢，我们看一下啊，看一下这边应该是都填了啊。然后点一下这个下一步对应的这个地址呢，我们还没有写。地址还没有写。哎，然后呢，那这个点下一步呢，这边肯定是404啊，这个无所谓哈，我们先看一下肯定是404，我们先看一下他要提交的数据是哪些。没显示这个请求体啊。那他这个是我们404的话，它这个不显示吗？我记得以前是可以的。

这个还看不着吗。这个黑浏览器我看看啊，我看一下这个代码啊。掉他的萨密达。这不是action哈，是不是POS的请求？可能是跟这个关系啊，我们这边是要上传一个文件哈。那行吧，那咱们就后边接收的话，咱们就根据具体的这个表单项去去对应哈。