對於表單裏的input：可以直接通過name找到，document.form[0].input_file
主要代碼：
var inputFile = document.forms[0].input_file;
var files = inputFile.files; //獲取文件列表
files[i].name
files[i].lastModifiedDate.toLocaleDateString()
(files[i].size/1024).toFixed(2)+"KB"完整實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.select-file{
width: 120px;
height: 20px;
border-radius: 3px;
background-color: yellow;
}
</style>
</head>
<body>
<form>
<input type="file" name="input_file" id="input_file" multiple hidden>
<input type="button" id="btn_select" value="選擇文件(可多選)" class="select-file">
<ul id="ul_file">
<!-- <li>
<h3>文件標題1</h3>
<p>文件內容2</p>
</li>-->
</ul>
</form>
<script>
(function(){
/*var inputFile = document.querySelector("#input_file");*/
var inputFile = document.forms[0].input_file;
var btnSelect = document.querySelector("#btn_select");
var ulFile = document.querySelector("#ul_file");
btnSelect.addEventListener("click",function(){
inputFile.click();
});
inputFile.addEventListener("change",function(){
var files = inputFile.files; //獲取文件列表
console.log(files);
for(var i = 0; i < files.length; i++){
var li = document.createElement("li");
li.innerHTML = "<h3>"+files[i].name+"</h3>"+
"<p>"+files[i].lastModifiedDate.toLocaleDateString()+" "+(files[i].size/1024).toFixed(2)+"KB"
"</p>";
ulFile.appendChild(li);
}
});
})();
</script>
</body>
</html> 此外，還有readAsDataURL接口：
<form enctype="multipart/form-data">
<div class="row clearfix w840">
<div class="r">
<input onclick="copyUrl2()" value="複製" name="res7" class="tools_btn06" type="button">
<input onclick="Word.value=''" value="清空" name="res7" class="tools_btn06" type="button">
</div>
<div class="span" style="width:325px">
<a href="javascript:;" class="input-file">
<input accept="image/*" name="upimage" id="upload_file" type="file" value="點擊這裏選擇選擇要轉換成Base64的圖片"> 點擊這裏選擇選擇要轉換成Base64的圖片
</a>
</div>
<div class="span" id="update_file_label"></div>
</div>
<div class="row clearfix tc">
<textarea id="base64_output" name="Word" style=" width:820px"></textarea>
</div>
<div class="row clearfix w840">
<div class="span">
<input value="還原生成的Base64編碼爲圖片：" class="tools_btn02" type="button" onclick="test_base64();">
</div>
<div class="span" style="margin-left:10px">
<div class="strong red" id="img_size"> </div>
</div>
</div>
<div class="row alert success w840">
<img id="img_prev" src="" style="max-width:100%;border: 1px solid gray;" data-bd-imgshare-binded="1">
</div>
</form>
<script type="text/javascript">
function $_(id) {
return document.getElementById(id);
}
function gen_base64() {
$_('base64_output').value = '';
$_('img_size').innerHTML = '';
$_('img_prev').src = '';
var file = $_('upload_file').files[0];
if (!/image\/\w+/.test(file.type)) {
alert("請確保文件爲圖像類型");
return false;
}
r = new FileReader(); //本地預覽
r.onload = function() {
$_('base64_output').value = r.result;
$_('img_size').innerHTML = " 圖片大小：" + Math.round(r.result.length / 1024 * 1000) / 1000 + " KB";
}
r.readAsDataURL(file); //Base64
}
function test_base64() {
$_('img_prev').src = '';
$_('img_prev').src = $_('base64_output').value;
}
window.onload = function() {
if (typeof(FileReader) === 'undefined') {
alert("抱歉，你的瀏覽器不支持 FileReader，請使用現代瀏覽器操作！");
$_('upload_file').disabled = true;
}
} document.getElementById("upload_file").onchange = function() { document.getElementById("update_file_label").innerHTML = this.value;
gen_base64();
};
</script>
