马上注册，结交更多好友，享用更多功能^_^
您需要 登录 才可以下载或查看，没有账号？立即注册
x
本帖最后由 不二如是 于 2019-1-14 10:34 编辑
万众瞩目的 零基础入门学习Web开发（H5&C3）开始更新了！！！ 
在Web新纪元 |【鱼C#视频课程】剧透这个系列的诞生，时间总是善待任何想拿它搞事情的存在体。
很幸运，一切就这样开始了，开局总会有些不足，但一切在慢慢变好，不是吗？
作为，吹水阁中最爱吹水（爱干无意义事情）的鱼油，整套教程的亮点（槽点）由我来承包～
关注本系列推送（最下方有订阅方式）的鱼油，会享受到一个福利：
会比正常推送，早一个时间节点，看到还未出炉的美味课程
哈哈，废话不多说了， #敲黑板时刻！ 
课程思维导图
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 类型列表
我们还可以通过"*"来限制所有类型，例如限制所有图片类型：
视频、音频同理，只需要改动"/"前面的标识符即可。
<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动作。
也就是不往服务器发送文件内容，而是 直接在客户端提醒用户
这的确是一个非常棒的主张，但在现实中却暂时无法实现。
不是因为这个限制可以“被简单地绕过”，而是IE和FireFox这两个主流浏览器都不支持这个特性。
PHP的这个建议尚未被采纳，所以写上也没关系，至少不会出错。
真正限制大小都是通过后端来实现的哈。
multiple属性
multiple 属性规定输入字段可选择多个值。
如果使用该属性，则字段可接受多个值：选择一个文件: <input type="file" name="filedata" multiple>
这样便可以同时上传多个文件哦。
课后作业，完成了吗？
传送门
如果有收获，别忘了评分 ：
这位鱼油，如果喜欢本系列学习笔记，请订阅 专辑☞（ 传送门）（ 不喜欢更要订阅 ）
| 
( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)
狗仔卡
发表于 2018-12-22 09:42:48
置顶卡
千斤顶
显身卡
发表于 2018-12-31 15:24:55
发表于 2019-1-3 20:05:33
