HTML文件上传

html-css010

HTML文件上传,第1张

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

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

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

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

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

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

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

是为这个选项框添加一个javascript事件函数,对选项框作出选择就会触发事件,在事件函数里根据选项的不同决定跳转的地址。

是选项框选择时先不跳转,点击提交的时候才进行跳转,这个需要在提交按钮上添加一个提交前事件,同样是javascript,在javascript函数里实现跳转。

第三种是动态web,在form里指定一个action,跳转到一个处理页面上,在这个页上通过获取request的请求参数来决定跳转到哪个地址。

HTML的英文全称是 Hyper Text Markup Language,即超文本标记语言

HTML是由Web的发明者 Tim BernersLee和同事 Daniel WConnolly于1990年创立的一种标记语言,它是标准通用化标记语言SGML的应用。

用HTML编写的超文本文档称为HTML文档,它能独立于各种操作系统平台UNIX, Windows等,使用HTML,将所需要表达的信息按某种规则写成HTML文件,通过专用的浏览器来识别,并将这些HTML文件翻译成可以识别的信息,即现在所见到的网页。

//改好了没问题..加文件试试

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

<script type="text/javascript">

function imgChange(next) {

if(next != null)

document.getElementById(next).style.display = ""

}

function validate() {

var phos = 2

for(i = 0i <2i++) {

if($("del" + i).checked == true)

phos--

}

for(i = 0i <4i++) {

if($("photoFile" + i).value != "")

phos++

}

if(phos >4) {

alert("图片太多,您最多总共可以保存4张图片!")

return false

}

return true

}

</script>

<form action="/addTrade.do" method="post" enctype="multipart/form-data" onSubmit="return validate()">

<!-- 上传照片-->

<div>

<table width="100%" border="0" cellspacing="0" cellpadding="0"

summary="upload pictures">

<tr id="tr_photoFile0">

<td width="119" align="right" class="title">

上传照片:

</td>

<td width="499">

<input type="file" name="photoFile0" id="photoFile0"

size="40" onChange='return imgChange("tr_photoFile1")' />

</td>

</tr>

<tr id="tr_photoFile1" style="display: none">

<td>

</td>

<td>

<input type="file" name="photoFile1" id="photoFile1"

onChange='return imgChange("tr_photoFile2")' size="40" />

</td>

</tr>

<tr id="tr_photoFile2" style="display: none">

<td>

</td>

<td>

<input type="file" name="photoFile2" id="photoFile2"

onChange='return imgChange("tr_photoFile3")' size="40" />

</td>

</tr>

<tr id="tr_photoFile3" style="display: none">

<td>

</td>

<td>

<input type="file" name="photoFile3" id="photoFile3"

onChange='return imgChange(null)' size="40" />

</td>

</tr>

</table>

</div>

<!--/ 上传照片-->

<input name="submit" type="submit" value="提交"/>

</form>