值得注意的是：如果是一个表单包含了这一控件，那么表单的enctype属性必须为multipart/form-data，method属性必须为post浏览器才正确编码并以multipart/form-data格式发送。
使用该控件上传文件时，js也无法获取该文件的真实路径。
js可以在提交表单时对文件拓展名进行检查，防止用户上传无效文件。
File API
js的文件操作十分有限，而且无法读取文件内容，在HTML5中的File API提供了File和FileReader这两个对象，可以获取文件信息并读取文件。
下面是一个例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
#show{
width:500px;
height:300px;
border:1px solid #ff0000;
}
</style>
<script>
window.onload=function() {
var filein = document.getElementById('file1'),
infor = document.getElementById('info'),
showbox = document.getElementById('show');
//监听change事件
filein.addEventListener('change',function () {
//清除showbox的背景图
showbox.style.backgroundImage = '';
//检查文件是否选择
if (!filein.value) {
infor.innerHTML = '没有选择文件';
return;
}
//获取文件引用
var file = filein.files[0];
//获取文件信息
infor.innerHTML = '文件' + file.name + '<br>' +
'大小' + file.size + '<br>' +
' 修改日期' + file.lastModifiedDate;
if (file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的图片文件!');
return;
}
//读取文件
var reader = new FileReader();
//设置一个回调函数，等待读取结束后调用
reader.onload = function (e) {
var data = e.target.result;
showbox.style.backgroundImage = 'url(' + data + ')';
};
//以url方式读取文件
reader.readAsDataURL(file);
});
}
</script>
</head>
<body>
<p >图片信息:<br></p>
<div id="info"></div>
<div id="show" ></div>
<form action="">
<input type="file" id="file1" >
</form>
</body>
</html>使用DataURL格式督导的文件是一个字符串类似于data:image/png;base64,/9j/4AAQSk...(base64编码)...，常用于设置图像，如果需要服务端处理，将字符串base64后面的字符发送到服务器解码就可以获得源文件的二进制内容。
