为啥这段代码获取不到 files 信息呢？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3650 天前的主题，其中的信息可能已经有所发展或是发生改变。

JS:
var h5 = { cache : {}, init : function(){ cache.$file = document.getElementById('file'); cache.$file.addEventListener('drop', this.drop_handle, false); }, drop_handle : function(e){ e.stopPropagation(); e.preventDefault(); var files = e.target.files || e.dataTransfer.files; console.info(files); return false; } } h5.init();
HTML:
<input type="file" name="" id="file" style="font-size:5em">
在 ff 或 chrome 中，把文件拖放进去到 file 按钮，console.log 出来的是空文件信息，这段代码有哪里有错吗？怎么看也没有错吧……

Cache

files

file

4 条回复 • 2014-11-24 18:48:46 +08:00

Arrowing

2014-11-24 17:35:24 +08:00

<input type="file" name="" id="file" style="font-size:5em" draggable="true">

this.cache.$file = document.getElementById('file');
this.cache.$file.addEventListener('drop', this.drop_handle, false);

typcn

2014-11-24 17:37:58 +08:00

http://blog.eqoe.cn/posts/jquery-drag-upload-image.html

参考这个，绑定个事件什么元素都可以了

Arrowing

2014-11-24 17:43:33 +08:00

var files = (e.target.files.length && e.target.files) || e.dataTransfer.files;

kmvan

2014-11-24 18:48:46 +08:00

@Arrowing var files = (e.target.files.length && e.target.files) || e.dataTransfer.files;

谢谢回复，不过奇怪啊，ff 里面获取的 e.target.files.length 居然是 0，但console出来的明明是显示1。而且 ff 的 e 里面没有 dataTransfer 属性，得加一个 originalEvent.dataTransfer，真奇葩。。。

@typcn 参考这个，绑定个事件什么元素都可以了

3Q，已参考 originalEvent.dataTransfer 这个属性……