HTML文件上传

html-css011

HTML文件上传,第1张

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

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

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

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

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

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

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

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

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

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

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

【html】

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

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

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

HTML中使用input type="file"上传文件时,代码中只能得到文件的名称,而有些特殊的需要要求得到上传文件的绝对路径,为此采用Javascript实现得到文件的绝对路径。

<form name="thisform" method="post"

action="<%=request.getContextPath()%>/movieManage.do" id="thisform" enctype="multipart/form-data">

<input type="file" name="theFile" onchange="document.getElementById('theFilePath').value=this.value"/>

<input type="hidden" id="theFilePath" name="theFilePath" value="">

</form>

注意:要有enctype="multipart/form-data"

Action代码:

String filePath = request.getParameter("theFilePath")

filePath既是上传文件的绝对路径。

浏览器中测试:

Firefox和IE中可以得到绝对路径。