1、定义一个Html文件，编写file控件。
2、在html文件中增加js代码，监听File控件。
3、预览页面效果。
4、上面的上传文件比较复杂，可以用jquery更简便的方法。
5、点击选择文件按钮，进行选择文件。
6、编辑完ihtml文件后，用浏览器打开html文件，当鼠标左键单击span时显示"触发鼠标单击事件"，双击span时显示"事件"，完成关闭。
HTML5 file组件的新属性accept : 如果在file组件中增加这个属性就可以直接控制上传的文件类型了，实在是很方便。
multiple：是否允许选择多个文件
HTML5 页面代码修改后
<img width="400" height="250"/><br />
<input type="file" id="pic" name="pic" onchange="printFileInfo()" accept="image/*" multiple="multiple"/>
<input type="button" value="上传图片" onclick="uploadFile()" /><br />
<div id="parent">
<div id="son"></div>
</div>
accept 的值可以参阅：IANA MIME 类型（标准 MIME 类型的完整列表），如果使用的是DW开发的话，软件本身就有提示。
如果选择了多个文件，可以用JS做循环打印，看看文件的名称，类型和大小,看演示代码
function printFileInfo(){
var picFile = document.getElementById("pic")
var files = picFile.files
for(var i=0i<files.lengthi++){
var file = files[i]
var div = document.createElement("div")
div.innerHTML = "第("+ (i+1) +") 个文件的名字："+ file.name +
" , 文件类型："+ file.type +" , 文件大小:"+ file.size
document.body.appendChild( div)
}
}
既然可以循环多文件的话，就可以尝试多文件上传了。
1、首先创建 XMLHttpRequest 对象
//这是全局变量。因为是示例，所以就没有判断浏览器类型，低版本IE这么写的话会出问题的
var xhr = new XMLHttpRequest()
2、上篇介绍了进度事件(Progress) ， 这次实现 progress 和 error 2个事件
error：在请求发生错误时触发。
对应上传时发生错误导致的上传失败：uploadFailed()
//上传失败
function uploadFailed(evt) {
alert("上传失败")
}
progress：在接收相应期间持续不断触发。
对应上传进度方法：onprogress()
/**
* 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
*/
function onprogress(evt){
var loaded = evt.loaded //已经上传大小情况
var tot = evt.total //附件总大小
var per = Math.floor(100*loaded/tot) //已经上传的百分比
$("#son").html( per +"%" )
$("#son").css("width" , per +"%")
}
最后就是上传方法了，注意上面的html代码中上传用的方法也需要改成这个uploadFile()方法才能正常使用。
//上传文件
function uploadFile() {
//将上传的多个文件放入formData中
var picFileList = $("#pic").get(0).files
var formData = new FormData()
for(var i=0i<picFileList.lengthi++){
formData.append("file" , picFileList[i] )
}
//监听事件
xhr.upload.addEventListener("progress", onprogress, false)
xhr.addEventListener("error", uploadFailed, false)//发送文件和表单自定义参数
xhr.open("POST", "upload")
//记得加入上传数据formData
xhr.send(formData)
}
