020 - 无敌是多么寂寞（III）

不二如是

上一集： 019 - 无敌是多么寂寞（Ⅱ）

---

                               
登录/注册后可看大图

万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！

在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。

很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？

作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～

关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：

会比正常推送，早一个时间节点，看到还未出炉的美味课程

哈哈，废话不多说了，#敲黑板时刻！

---

在线视频：传送门

---

课程思维导图

猛戳

                               
登录/注册后可看大图

超清

---

1、type="file"

本节课我们继续死磕“input”元素的属性值，万能的input元素还可以化身为“上传文件”，代码：

1. <form>
   
2.     选择一个文件: <input type="file" name="uploadFile">
   
3. </form>

复制代码

这样我们便创建了一个文件上传栏，单击“选择文件”，会弹出上传界面。

这个界面已经封装好了，通过input元素可以自动加载，不需要我们重复去写。

但此时只是一个“空壳子”，并不能完成上传，至少得为form元素添加，method属性：

1. <form action="upload.php" method="post">
   
2.     选择一个文件: <input type="file" name="filedata">
   
3. </form>

复制代码

关于methon属性的get和post区别，若想复习，参看：015 - 你说hello我说hei

关于upload.php，大家不用着急写，理解为后端来处理我们上传的文件即可，默认已经写好。

如果我们只设置了method，还是没法“上传成功”，还需要指定entype属性。

enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码，默认格式：

1. application/x-www-form-urlencoded

复制代码

文件传输，我们需要指定为：

1. enctype="multipart/form-data"

复制代码

代码：

1. <form action="upload.php" method="post" enctype="multipart/form-data">
   
2.     选择一个文件: <input type="file" name="filedata">
   
3. </form>

复制代码

这样我们就上传成功了。

---

2、accept属性

在文件上传中使用 accept 属性，限制上传文件类型，创建代码：

1. <form>
   
2.   <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
   
3. </form>

复制代码

上面代码中，input元素中输入字段可以接受 GIF 和 JPEG 两种图像。

图像、音频、视频等类型都可以限制，更多参看：完整的 MIME 类型列表

我们还可以通过"*"来限制所有类型，例如限制所有图片类型：

1. accept="image/*"

复制代码

视频、音频同理，只需要改动"/"前面的标识符即可。

---

<input type="hidden" name="MAX_FILE_SIZE" value="1024">

这是一个比较尴尬的操作，只是建议，但没有生效。

我们在代码中加入了该条语句，代码：

1. <form action="welcome.php" method="post">
   
2.     <input type="hidden" name="MAX_FILE_SIZE" value="1024">
   
3.     选择一个文件: <input type="file" name="filedata">
   
4. </form>

复制代码

这里设置MAX_FILE_SIZE ＝ 1024，期待一种可能，使得浏览器在传送文件之前能够依此作出预先判断。

如果文件尺寸大于1024字节，则不执行实际的POST动作。

也就是不往服务器发送文件内容，而是 直接在客户端提醒用户

游客，如果您要查看本帖隐藏内容请回复

这的确是一个非常棒的主张，但在现实中却暂时无法实现。

不是因为这个限制可以“被简单地绕过”，而是IE和FireFox这两个主流浏览器都不支持这个特性。

PHP的这个建议尚未被采纳，所以写上也没关系，至少不会出错。

真正限制大小都是通过后端来实现的哈。

---

multiple属性

multiple 属性规定输入字段可选择多个值。

如果使用该属性，则字段可接受多个值：

1. 选择一个文件: <input type="file" name="filedata" multiple>

复制代码

这样便可以同时上传多个文件哦。

---

课后作业，完成了吗？

传送门

---

                               
登录/注册后可看大图

下一集： 021 - 无敌是多么寂寞（IV）

---

如果有收获，别忘了评分 ：

                               
登录/注册后可看大图

这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑&#9758;（传送门）（不喜欢更要订阅 ）

                               
登录/注册后可看大图

cjj735243954

0.0

MisterLiu

TCY

文件太大

qq664752

李小控

我又来学习啦

Willing-

啊

讨债仔

by2014

药水哥

888888888888888888888888888888888

大风包子

666

学习的工作者

Fire4EVER

1

我要好好学习=

想要知道

dd8556471

我想請問為何沒有 練習檔？

ingram123

1

只想白嫖

11

心驰神往

what、

归林22

顶

鸦羽

1