说明：
1.拖动文件到虚线框中，相当于点击按钮选择文件并上传。
2.fastadmin框架下二次开发改造的。
3.参考效果页面 http://www.pdftools.xyz
代码改动：
index.html
<div class="upload-box-p" id="uploadBoxArea"> <div class="upload-box-btn"> <div><label class="upload-box-desc">您也可以拖拽文件到虚线框中进行转换</label></div> <span> <button type="button" data-titleback="false" id="plupload-avatar" class="btn btn-success btn-lg plupload" data-input-id="c-avatar" data-mimetype="application/octet-stream" data-multiple="false" data-preview-id="p-avatar"> <i class="fa fa-upload"></i> 点此上传word文件 </button> </span> </div> </div>
index.js
//添加拖拽事件 var dz = document.getElementById('uploadBoxArea'); dz.ondragover = function (ev) { //阻止浏览器默认打开文件的操作 ev.preventDefault(); //拖入文件后边框颜色变红 this.style.borderColor = 'red'; } dz.ondragleave = function () { //恢复边框颜色 this.style.borderColor = 'gray'; } dz.ondrop = function (ev) { //恢复边框颜色 this.style.borderColor = 'gray'; //阻止浏览器默认打开文件的操作 ev.preventDefault(); var files = ev.dataTransfer.files; if(files.length>0){ //fastadmin框架调用的真实文件上传方法，对应改成你自己的逻辑 Upload.api.send(files[0], function (data) { Controller.uploadSuccess(data); }); } }
附css
.upload-box{ height:300px; background:#eee; padding: 10px; } .upload-box-p .plupload-preview{ flex-wrap:wrap; /*height:60%;*/ list-style: none; display:none; } .upload-box-p{ border: 1px dashed #ada2a2; height:100%; display:flex; flex-direction: column; justify-content: center; } .upload-box-desc{ color: #888; font-size: 2em; }
完整文章点击这里：