HTML文件上传

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

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

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

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

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

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

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

1、首先打开学习通，点击右下角的我。

2、其次进入个人页面，点击课程。

3、最后进入课程页面，点击进入需要交作业的课程。学习通是由北京世纪超星信息技术发展有限责任公司于2016年开发的一款集移动教学、移动学习、移动阅读、移动社交为一体的免费应用程序，仅支移动端。

表单提交有很多方法：

一、最常见的就是type="submit"的按钮触发form的onsubmit事件

<scripttype="text/javascript">

function validateForm(){

if(document.reply.title.value== ""){ //通过form名来获取form

alert("pleaseinput the title!")

document.reply.title.focus()

returnfalse

}

if(document.forms[0].cont.value== ""){ //通过forms数组获取form

alert("pleaseinput the content!")

document.reply.cont.focus()

returnfalse

}

returntrue

}

<formname="reply" method="post" onsubmit="returnvalidateForm( )">

<input type="text"name="title" size="80" /><br />

<textarea name="cont"cols="80" rows="12"></textarea><br />

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

</form>

注意：

1.onsubmit属性内容一定要有return关键字，否则函数会直接执行，不会返回

2.validateForm一定要返回一个boolean类型的返回值

3.提交按钮要写成submit类型的

二、利用input类型为submit组件的onclick()函数

1.将上面form标签中的onsubmit="return validateForm()"属性，去掉。

2.为“提交”按钮添加onclick事件，如下：

<input type="submit" value="提交" onclick="return validateForm()">

三、利用button组件的onclick()函数，手动提交

<script type="text/javascript">

function modifyItem() {

if (trim(document.getElementById("itemName").value) == "") {

alert("物料名称不能为空！")

document.getElementById("itemName").focus()

return

}

with (document.getElementById("itemForm")) {

method = "post"

action = "item.do?command=modify&pageNo=${itemForm.pageNo}"

submit()

}

}

//返回

function goBack() {

window.self.location = "item.do?command=list&pageNo=${itemForm.pageNo}"

}

</script>

<form name="itemForm" id="itemForm">

<input name="itemNo" type="text" id="itemNo" value="${ item.itemNo }" >

<input name="itemName" type="text" id="itemName" value="${ item.itemName }" >

<input name="btnModify" type="button" id="btnModify" value=“修改" onclick="modifyItem()">

</form>

注意：

1.提交时，设置form的action和method属性，然后利用form.submit()函数提交。

---