相关疑难解决方法(0)

jQuery HTML5文件拖放

我已经看了很多脚本,用于通过拖放式AJAX将图像上传到服务器.我找到的脚本不是jQuery,非常大,并没有完全按照我的意愿行事.

将来它应该使用jQuery,AJAX和PHP上传图像.

我的问题

在许多示例中,我查看了e.dataTransfer.files的工作.在我的情况下,它没有.我需要以某种方式绑定它吗?

我想尽可能多地使用jQuery.

的jsfiddle

尽情玩耍......

http://jsfiddle.net/AMjEz/

<html>
    <head>
        <style type="text/css">
            #dropzone {
                border: 2px dashed #ccc;
                width: 300px;
                height: 200px;
            }
        </style>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('#dropzone').on({
                    dragenter: function(e) {
                        $(this).css('background-color', 'lightBlue');
                    },
                    dragleave: function(e) {
                        $(this).css('background-color', 'white');
                    },
                    drop: function(e) {
                        e.stopPropagation();
                        e.preventDefault();
                        console.log(e.dataTransfer.files);
                    }
                });
            });
        </script>
    </head>
    <body>
        <div id="dropzone">
            Drop files here
        </div>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

jquery html5 drag-and-drop

13
推荐指数
2
解决办法
3万
查看次数

标签 统计

drag-and-drop ×1

html5 ×1

jquery ×1