纯 js 实现上传文件支持拖拽

开发「bufpay.com 个人即时到账收款平台」后台需要支持开发者的微信和支付宝二维码上传。

<p>
<button class="btn btn-primary" onClick="javascript:document.getElementById('fileupload').click();">批量上传微信/支付宝支付二维码</button>
<input style="display:none;" id="fileupload" type="file" name="file" accept="image/*" multiple>
</p>

原来的方式是点击 button 触发一个隐藏的 file 的 onchange 事件，从而弹出文件选择框，选择文件。

但是有用户反馈直接拖动收款二维码进去会方便一些。于是，修改原代码，在 js 文件中添加

<p id="drop_area" onClick="javascript:document.getElementById('fileupload').click();">
<button class="btn btn-primary">批量上传微信/支付宝支付二维码</button>
<input style="display:none;" id="fileupload" type="file" name="file" accept="image/*" multiple>
</p>

var dp = document.getElementById('drop_area');dp.addEventListener('dragover', function(e) {e.stopPropagation();e.preventDefault();e.dataTransfer.dropEffect = 'copy';});dp.addEventListener("drop", function(e) {e.stopPropagation();e.preventDefault();var files = e.dataTransfer.files;// do something upload});

把 button 的上一级 p 作为一个 drop area 添加监听 dragover 和 drop 事件，在 drop 事件里面对拖动的文件进行操作即可。

插播广告 ✧(≖ ◡ ≖✿)嘿嘿

转载于:https://www.cnblogs.com/worldsku/p/9184386.html

纯 js 实现上传文件支持拖拽相关推荐

图片上传（支持拖拽上传）及列表图片预览
要注意的是图片路径先看效果图: 下面是代码啦: 前端ftl index: <#assign base=request.contextPath/> <!DOCTYPE HTML> ...
js获取上传文件内容
js 获取上传文件的字节数及内容 <div>上传文件 : <input type="file" name = "file" id = &quo ...
JS 判断上传文件是否为EXCEL 文件
<SCRIPT language="JavaScript"> function checkform(o){var f_content = form1.file.valu ...
html得到上传文件类型后缀,js获取上传文件后缀名（附js提交form表单）
js获取上传文件后缀名(附js提交form表单) 代码如下: function check_file() { var strFileName=form1.FileName.value; if (str ...
js ajax上传文件功能
js ajax上传文件功能 ajax请求 php接收文件(yii框架) ajax请求 <form enctype="multipart/form-data"><i ...
PDF文件支持拖拽盖章最后生成PDF文件
项目说明: 根据b站一位博主提供的源码改写了部分方便大家参考 git地址 https://gitee.com/kong-lingbin/pdf-seal-dragging 最终实现效果需求: 凡pf ...
js并发上传文件到不同服务器,simple-uploader.js 功能强大的上传组件 - 文章教程
simple-uploader.js(也称 Uploader)是一个上传库,支持多并发上传,文件夹.拖拽.可暂停继续.秒传.分块上传.出错自动重传.手工重传.进度.剩余时间.上传速度等特性:该上传库依 ...
egg.js ajax上传文件,egg.js 通过 form 和 ajax 两种方式上传文件并自定义目录和文件名...
一.需求 egg.js 的文件上传个人觉得很一般,内置的 multipart 插件并不怎么好用. egg-multipart 也是基于 co-busboy 实现的. egg 官方给的文件上传的示例地址 ...
php ajaxfileupload.js 使用,使用ajaxfileupload.js实现上传文件功能
一直以来上传文件都是使用form表单上传文件,也看到过有人使用js上传文件,不过看起来蛮简单的也就没有怎么去理会.今天突然要使用这种方式上传文件,期间还遇到点问题.因此就记录下来,方便以后遇到这样的问 ...

纯 js 实现上传文件支持拖拽

纯 js 实现上传文件支持拖拽相关推荐

最新文章

热门文章