020 - 无敌是多么寂寞（III）
本帖最后由 不二如是 于 2019-1-14 10:34 编辑上一集： 019 - 无敌是多么寂寞（Ⅱ）
http://xxx.fishc.com/forum/201803/20/094616suu10rovsa60kazi.jpg
万众瞩目的零基础入门学习Web开发（H5&C3）开始更新了！！！{:10_298:}
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
1、type="file"
本节课我们继续死磕“input”元素的属性值，万能的input元素还可以化身为“上传文件”，代码：
<form>
选择一个文件: <input type="file" name="uploadFile">
</form>
这样我们便创建了一个文件上传栏，单击“选择文件”，会弹出上传界面。
这个界面已经封装好了，通过input元素可以自动加载，不需要我们重复去写。
但此时只是一个“空壳子”，并不能完成上传，至少得为form元素添加，method属性：
<form action="upload.php" method="post">
选择一个文件: <input type="file" name="filedata">
</form>
关于methon属性的get和post区别，若想复习，参看：015 - 你说hello我说hei
关于upload.php，大家不用着急写，理解为后端来处理我们上传的文件即可，默认已经写好。
如果我们只设置了method，还是没法“上传成功”，还需要指定entype属性。
enctype 属性规定在将表单数据发送到服务器之前如何对其进行编码，默认格式：
application/x-www-form-urlencoded
文件传输，我们需要指定为：
enctype="multipart/form-data"
代码：
<form action="upload.php" method="post" enctype="multipart/form-data">
选择一个文件: <input type="file" name="filedata">
</form>
这样我们就上传成功了。
2、accept属性
在文件上传中使用 accept 属性，限制上传文件类型，创建代码：
<form>
<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>
上面代码中，input元素中输入字段可以接受 GIF 和 JPEG 两种图像。
图像、音频、视频等类型都可以限制，更多参看：完整的 MIME 类型列表
我们还可以通过"*"来限制所有类型，例如限制所有图片类型：
accept="image/*"
视频、音频同理，只需要改动"/"前面的标识符即可。
<input type="hidden" name="MAX_FILE_SIZE" value="1024">
这是一个比较尴尬的操作，只是建议，但没有生效。
我们在代码中加入了该条语句，代码：
<form action="welcome.php" method="post">
<input type="hidden" name="MAX_FILE_SIZE" value="1024">
选择一个文件: <input type="file" name="filedata">
</form>
这里设置MAX_FILE_SIZE ＝ 1024，期待一种可能，使得浏览器在传送文件之前能够依此作出预先判断。
如果文件尺寸大于1024字节，则不执行实际的POST动作。
也就是不往服务器发送文件内容，而是 直接在客户端提醒用户
**** Hidden Message *****
这的确是一个非常棒的主张，但在现实中却暂时无法实现。
不是因为这个限制可以“被简单地绕过”，而是IE和FireFox这两个主流浏览器都不支持这个特性。
PHP的这个建议尚未被采纳，所以写上也没关系，至少不会出错。
真正限制大小都是通过后端来实现的哈。
multiple属性
multiple 属性规定输入字段可选择多个值。
如果使用该属性，则字段可接受多个值：
选择一个文件: <input type="file" name="filedata" multiple>
这样便可以同时上传多个文件哦。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集： 021 - 无敌是多么寂寞（IV）
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（传送门）（不喜欢更要订阅{:10_297:} ）
http://xxx.fishc.com/forum/201803/21/151715umqz1qoywp11wjbq.gif
0.0 {:10_254:} 文件太大 {:10_254:} 我又来学习啦
啊 {:10_277:} {:5_95:} 888888888888888888888888888888888 666 {:5_110:} 1 想要知道 我想請問為何沒有 練習檔？ 1 11 {:10_277:}what、 顶 1
页:
[1]
2