值得注意的是：如果是一個表單包含了這一控件，那麼表單的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後面的字符發送到服務器解碼就可以獲得源文件的二進制內容。
