javascript - 文件拖拽到浏览器如何获取files?
高洛峰
高洛峰 2017-06-12 09:25:02
[JavaScript讨论组]

如果是在页面上传点击 可以点击后获取 input file 里的 files[0];

现在需求是直接在桌面把图片拖拽到浏览器。 如何获取 files[0] 第一个文件?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回复(1)
typecho
/**
 * 拖拽实现
 */
var dropbox = document.getElementById("dropbox");

dropbox.addEventListener("dragenter", function(e){
    e.stopPropagation();
    e.preventDefault();
}, false);
            
dropbox.addEventListener("dragover", function(e){
    e.stopPropagation();
    e.preventDefault();
}, false);
            
dropbox.addEventListener("drop", function(e){
    e.stopPropagation();
    e.preventDefault();
            
    var dt = e.dataTransfer;
    var files = dt.files;
    
    // files[0]即为第一个文件
      
}, false);

具体可以参考:通过拖放操作选择文件

另外给你推荐一个我写的例子:
选择图片文件——支持三种方式(输入框选择, 拖拽选择,截图粘贴三种输入方式)

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号