HTML文件上传

html-css032

HTML文件上传,第1张

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

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

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

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

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

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

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

我们的目标是创造一个简洁,用纯CSS实现的,在所有浏览器里的样子和布局是一样的上传文件按钮。我们可以这样:

步骤1.创建一个简单的HTML标记

Upload

第2步:CSS:

有点棘手了

.fileUpload

{

position:

relative

overflow:

hidden

margin:

10px

}

.fileUpload

input.upload

{

position:

absolute

top:

0

right:

0

margin:

0

padding:

0

font-size:

20px

cursor:

pointer

opacity:

0

filter:

alpha(opacity=0)

}

为简单起见,我使用应用了BootstrapCSS样式的按钮

(div.file-upload)。

演示:

上传按钮,显示选中的文件

不幸的是纯CSS的做不到这一点。但是,如果你真的想显示所选文件,下面的JavaScript代码片段可以帮助你。

JavaScript:

document.getElementById("uploadBtn").onchange

=

function

()

{

document.getElementById("uploadFile").value

=

this.value

}

DOM:

Upload

这个样式挺漂亮的,你可以试下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>定义input type="file" 的样式</title>

<style type="text/css">

body{ font-size:14px}

input{ vertical-align:middlemargin:0padding:0}

.file-box{ position:relativewidth:340px}

.txt{ height:22pxborder:1px solid #cdcdcdwidth:180px}

.btn{ background-color:#FFFborder:1px solid #CDCDCDheight:24pxwidth:70px}

.file{ position:absolutetop:0right:80pxheight:24pxfilter:alpha(opacity:0)opacity: 0width:260px }

</style>

</head>

<body>

<div class="file-box">

<form action="" method="post" enctype="multipart/form-data">

<input type='text' name='textfield' id='textfield' class='txt' />

<input type='button' class='btn' value='浏览...' />

<input type="file" name="fileField" class="file" id="fileField" size="28" onchange="document.getElementById('textfield').value=this.value" />

<input type="submit" name="submit" class="btn" value="上传" />

</form>

</div>

</body>

</html>