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

不二如是 · 发表于 2018-12-22 09:42:48

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由不二如是于 2019-1-14 10:34 编辑

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

登录/注册后可看大图

万众瞩目的零基础入门学习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 类型列表

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

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动作。

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

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

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

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

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

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

multiple属性

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

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

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

复制代码

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

课后作业，完成了吗？

传送门

登录/注册后可看大图

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

如果有收获，别忘了评分

：

登录/注册后可看大图

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

）

登录/注册后可看大图

cjj735243954 · 发表于 2018-12-31 15:24:55

MisterLiu · 发表于 2019-1-3 20:05:33

TCY · 发表于 2019-1-13 14:19:23

文件太大

qq664752 · 发表于 2019-1-13 22:46:38

李小控 · 发表于 2019-2-21 20:37:46

我又来学习啦

Willing- · 发表于 2019-4-8 21:31:42

讨债仔 · 发表于 2019-5-29 10:21:27

by2014 · 发表于 2019-7-21 20:06:21

药水哥 · 发表于 2019-8-31 00:44:31

888888888888888888888888888888888

大风包子 · 发表于 2019-9-18 11:01:10

学习的工作者 · 发表于 2020-4-11 15:30:59

Fire4EVER · 发表于 2020-6-15 20:52:05

我要好好学习= · 发表于 2020-8-15 13:01:54

想要知道

dd8556471 · 发表于 2020-9-1 09:09:09

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

ingram123 · 发表于 2020-12-11 15:00:58

只想白嫖 · 发表于 2021-1-13 16:25:56

心驰神往 · 发表于 2021-8-2 15:42:13

what、

归林22 · 发表于 2021-10-19 11:13:15

鸦羽 · 发表于 2021-11-8 11:03:49

账号		自动登录	找回密码
密码			立即注册

[学习笔记] 020 - 无敌是多么寂寞（III）

马上注册，结交更多好友，享用更多功能^_^

评分

本帖被以下淘专辑推荐:

浏览过的版块