file API
<div class="container"><form action="">
<!-- 对于表单里的input来说：可以直接通过name找到
document.form.input_file
multiple让文件域可以多选 -->
<input id="input_file" class="form-control hidden" type="file" name="input_file" multiple>
<input id="btn_select" class="btn btn-info" type="button" value="选择文件">
<ul id="file_list" class="list-group">
</ul>
</form>
</div>
<script>
(function() {
var inputFile = document.querySelector('#input_file');
var fileList = document.querySelector('#file_list');
var btnSelect = document.querySelector('#btn_select');
btnSelect.addEventListener('click', function() {
// 在按钮点击时调用input的点击
inputFile.click();
});
// 选择完成后
inputFile.addEventListener('change', function() {
var files = inputFile.files;
for (var i = 0; i < files.length; i++) {
var li = document.createElement('li');
li.setAttribute('class', 'list-group-item');
// 创建信息的子节点
li.innerHTML = '<h5 class="list-group-item-heading">'
+ files.name + '</h5><p class="list-group-item-text">'
+ files.lastModifiedDate.toLocaleDateString() + ' '
+ files.lastModifiedDate.toLocaleTimeString() + ' '
+ (files.size / 1024).toFixed(2) + 'KB</p>';
fileList.appendChild(li);
}
});
})();
</script>
页:
[1]