本地文件拖拽到浏览器
利用HTML5的File API可以实现文件拖拽到服务器上
直接看例子：
<!DOCTYPE html><head> <meta charset="UTF-8"> <style> #drop_zone{ width: 500px; height:300px; background-color: yellow; } </style></head><body> <div id="drop_zone">将文件拖拽到这里</div> <div id="output_area"></div> <script> var output = document.getElementById('output_area'); var dropZone = document.getElementById('drop_zone'); if (!(('draggable' in dropZone) && ('ondragenter' in dropZone) && ('ondragleave' in dropZone) && ('ondragover' in dropZone) && window.File)) { } else { function handleFileDragEnter(e) { e.stopPropagation(); e.preventDefault(); this.classList.add('hovering'); } function handleFileDragLeave(e) { e.stopPropagation(); e.preventDefault(); this.classList.remove('hovering'); } function handleFileDragOver(e) { e.stopPropagation(); e.preventDefault(); e.dataTransfer.dropEffect = 'copy'; } function handleFileDrop(e) { e.stopPropagation(); e.preventDefault(); this.classList.remove('hovering'); var files = e.dataTransfer.files; var outputStr = []; for (var i = 0, f; f = files[i]; i++) { var lastModified = f.lastModifiedDate; var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString() : 'n/a'; outputStr += '<li><strong>' + f.name + '</strong> (' + (f.type || 'n/a') + ')<br>大小：' + f.size + '字节<br>修改时间：' + lastModifiedStr + '</li>'; } output.innerHTML = '<ul>' + outputStr + '</ul>'; } dropZone.addEventListener('dragenter', handleFileDragEnter, false); dropZone.addEventListener('dragleave', handleFileDragLeave, false); dropZone.addEventListener('dragover', handleFileDragOver, false); dropZone.addEventListener('drop', handleFileDrop, false); } </script></body>