HTML文件上传

html-css029

HTML文件上传,第1张

使用 input ，指定类型为 file ，来完成文件上传功能。

多文件上传需要在标签上添加 mulyiple 属性：

使用 accept 属性来限制上传文件的类型，当然这么做任然是不可靠的，还需要后端做进一步的判断。

如果我们是用户，当我们上传了一张图片，却只显示了几个文字，是不是很不爽，那我们怎么来实现预览功能呢？

我们可以使用 FileReader 将图像转换为二进制字符串，然后添加 load 事件监听，在文件上传成功后获取二进制字符串。

显示文件上册进度 来提高用户体验

FileReader 还有一个 progress 事件，表示当前上传进度，配合HTML5的 progress 标签，我们来模拟一下文件的上传进度。

要看你的网站是自己电脑作服务器还是租用空间的形式，如是自己电脑，则把文件放到网站目录下就行了，想必你是租用空间的，

这就要看那个空间提供商，允许你采用什么方式传，大部分的都支持ftp，web管理页传，

ftp传的话，下个ftp软件，输入服务器ip,你的帐号，密码（都由空间提供商给你），软件就能打开一个远程目录，把文件拖到该目录就行，

web管理页传的话，用你的帐号，密码登录空间提供商的管理系统（一个网页），之后就跟发邮件附件类似，把文件传到相应目录下就行。

【html】

超文本标记语言，标准通用标记语言下的一个应用。

“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。

在HTML标准中，XMLHttpRequest对象被重新定义，被称为“XMLHttpRequest Level 2”，其中包含了以下5个新特性：

1、支持上传、下载字节流，比如文件、blob以及表单数据。

2、增加了上传、下载中的进度事件。

3、跨域请求的支持。

4、允许发送匿名请求（即不发送HTTP的Referer部分）。

5、允许设置请求的超时。

在这篇教程中，我们主要关注第一和第二项特性，尤其是第二项——它能够提供我们想要的上传进度。和之前的方案不同，这个方案并不要求服务器作出特殊的设置，因此大家边看教程就可以边动手试试了。

上面图示的就是我们能够实现的内容：

1、显示上传的文件信息，比如文件名、类型、尺寸。

2、一个能够显示真实进度的进度条。

3、上传的速度。

4、剩余时间的估算。

5、已上传的数据量。

6、上传结束后服务器返回的响应。

另外，凭借XMLHttpRequest，我们的上传过程整个都是异步的，因此用户在上传文件的时候，依然可以操作网页当中的其它元素，并不需要专门等待上传的完成。而在上传结束后，我们能够获取服务器发回的响应，因此整个上传过程都显得相当顺理成章。