var target = document.querySelector('#target'); var contentDiv = document.querySelector('#content'); target.addEventListener('dragover', function(e) { e.preventDefault(); e.stopPropagation(); e.dataTransfer.dropEffect = 'copy'; return false; }); target.addEventListener('drop', function(e) { e.preventDefault(); e.stopPropagation(); var fileList = e.dataTransfer.files; if (fileList.length) { var file = fileList[0]; var reader = new FileReader(); reader.onloadend = function(e) { if (e.target.readyState == FileReader.DONE) { var content = reader.result; contentDiv.innerHTML = 'File: ' + file.name + '\n\n' + content; } } reader.readAsBinaryString(file); } });
<div id="target" title="拖动文件到这里"> <div id="content"></div> </div>
#target{ margin:10px; min-height:100px; max-height:600px; background-color:#EEE; border-radius:5px; overflow:auto; } #content{ padding:10px; font-size:18px; line-height:25px; }