var canvas = document.getElementById('paste'); var desc = document.getElementById('desc'); //有些浏览器如果拖入文件会直接新打开一个窗口,需要拦截此事件 canvas.addEventListener('dragover', function(e) { e.stopPropagation(); e.preventDefault(); return false; }); canvas.addEventListener('drop', function(e) { e.stopPropagation(); e.preventDefault(); var files = e.dataTransfer.files; desc.innerHTML = '你选择了' + files.length + '个文件,第一个文件' + files[0].name; if (!files.length) return alert('没有选择任何文件'); for (var i = 0, _len = files.length; i < _len; i++) { if (['image/png', 'image/jpeg', 'image/gif'].indexOf(files.item(i).type) !== -1) { readImage(files.item(i), previewImage); // 等同于 files[i] } else { desc.innerHTML += '<br>' + files[i].name + '不支持预览'; } } }); function readImage(file, callback) { var reader = new FileReader(); //监听读取完毕事件 reader.onload = function(e) { callback(reader.result); }; reader.readAsDataURL(file); } function previewImage(readerResult) { var image = new Image(); image.src = readerResult; document.getElementById('preview').appendChild(image); }
<div id="paste"> 请选择拖动文件到这里 </div> <p id="desc"></p> <div id="preview"></div>
body { background-color: #fff; } #paste { width: 100%; background-color: #ccc; height: 300px; line-height: 300px; font-size: 30px; border: 2px dashed red; text-align: center; } #preview { width: 90%; margin: 30px auto; } #preview img { width: 120px; margin: 10px; }