emm,这篇代码并不是利用input来选取文件，而是自己打开资源管理器单选或多选文件拖拽至浏览器的页面，表格中会自动填充文件信息。嗯，木有拖拽文件进来之前，

拖拽之后

。。。。美观方面多有不足～

--------------------------代码分割线------------------

button{

cursor: pointer;

}

#content{

width: 40%;

height: 500px;

overflow-y: scroll;

margin-left: 30%;

border: 5px double greenyellow;

}

img{

width: 300px;

height: 300px;

}

var box=document.getElementById('container'),

info=['name','type','size']//想要提取的信息

arr=new Array(),

index=0,

content=document.getElementById('content');//存放每一次的读取信息;

document.ondragenter=function(ev){ev.preventDefault()};

document.ondragover=function(ev){ev.preventDefault()};

document.ondrop=function(e){

e.preventDefault();

var files=e.dataTransfer.files,

len=files.length;

for(let i=0;i

let tr=box.insertRow(i),file=files[i];

tr.id = index++;//保留i为td的id作为arr索引值

for(let y=0;y

let td = tr.insertCell(y);

if(y==3){

td.innerHTML="读取";  

}

if(file[info[y]]){

td.innerHTML=file[info[y]];

}

}

 arr.push(files[i]);

}

}

function read(obj){

let index=obj.parentNode.parentNode.id,

pro = document.getElementsByClassName('pro'),//找到所在tr的id

   file=arr[index],

reader = new FileReader();

for(let i=0;i

console.log(pro[i].getAttribute('data-id'))

if(pro[i].getAttribute('data-id')==index);

var _pro=pro[i];

}

 if(file.type!=null&&(file.type.indexOf('text')>-1)){  

 reader.readAsText(file, 'utf-8');  

 reader.=function(){

 content.innerHTML=reader.result;

 }  

}else if(/image/.test(file.type)){

let createObjectURL=function(blob){

return window[window.webkitURL?'webkitURL':'url']['createObjectURL'](blob);

}

let url=createObjectURL(file);

//content.innerHTML=""

//出现错误，不支持家在本地资源(Not allowed to load local resource)。。。，

var img = new Image();

 img.src = url;

 content.appendChild(img);//success

}

else{

alert('不是文本文件!')

}

}

--------------------------------end!-------------------------

不足指出，还请多指教！