2 gouaug GouAug 于 2013.05.28 11:54 提问

html5 拖拽上传,通过e.dataTransfer.files,拿到的file一直为null
 <script type="text/javascript" charset="utf-8">
        //文件上传
        jQuery(function ($) {
            var uploadFile = function (file) {
                var element = $("<div />");
                element.text(file.fileName);

                var bar = $("<div />");
                element.append(bar);
                $("#progress").append(element);
                var onProgress = function (e) {
                    var per = Math.round((e.position / e.total) * 100);
                    bar.progressbar({ value: per });
                };
                var onSuccess = function () {
                    element.text("Complete");
                    element.delay(1000).fade();
                };

                $.upload("/Images/uploads", file, { upload: { progress: onProgress }, success: onSuccess });
            };

            // 创建拖拽目标区域
            window.addEventListener("load", function () {
                var element = document.getElementById("drop");

                element.addEventListener("dragenter", function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                });

                element.addEventListener("dragover", function (e) {
                    e.dataTransfer.dropEffect = "copy";
                    e.stopPropagation();
                    e.preventDefault();
                });

                element.addEventListener("drop", function (e) {
                       var file = e.dataTransfer.files;   
                    for (var i = 0; i < file.length; i++)
                        alert("Drop " + file[i].name.toString());
                    uploadFile(file[i]);
                    return false;
                });
                document.body.addEventListener("dragover", function (e) {
                    e.stopPropagation();
                    e.preventDefault();
                    return false;
                });
            });
                   });

    </script>

5个回答

chenfudan9
chenfudan9   2015.11.10 17:24

应该是这样吧 var file = e.dataTransfer.files[0];

qq_30123829
qq_30123829   2015.12.08 15:36

在对drop做监听的时候应该是这样的:
[].forEach.call(e.dataTransfer.files, function (file) {
alert("file=" + file);
},false));
用[].forEach.call([],function (file){},false/true)循环遍历数组的方法得到文件!
论坛新人,若有帮助请多给点积分!!!谢谢啦

LingMoZuoZuo
LingMoZuoZuo   2016.07.12 16:16

直接用原生js,jquery估计有什么改动导致访问不到

LingMoZuoZuo
LingMoZuoZuo   2016.07.12 16:17

document.getElementById().addEventListener(function(e){e.dataTransfer;});

sk27
sk27   2017.11.29 09:49

e.originalEvent.dataTransfer.files

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!