Перетаскивание файла HTML5 в jQuery

Я просмотрел множество сценариев для загрузки изображений на сервер с помощью 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>

Ответ 1

Я узнал, что это ошибка в jQuery.1.8. Эта строка должна быть до $('.dropzone').

$.event.props.push('dataTransfer');

Окончательный код HTML

<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($) {
                var filename = '';
                var image_data = '';

                $.event.props.push('dataTransfer');
                $('.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();

                        var file = e.dataTransfer.files[0];
                        var fileReader = new FileReader();

                        var this_obj = $(this);

                        fileReader.onload = (function(file) {
                            return function(event) {
                                // Preview
                                filename = file.name;
                                image_data = event.target.result;
                                $(this_obj).next().html('<a href="#" class="upload-file">Upload file</a>');
                                $(this_obj).html('<img style="max-width: 200px; max-height: 200px;" src="' + event.target.result + '">');
                            };
                        })(file);

                        fileReader.readAsDataURL(file);         
                    }
                });

                // Upload file
                $(".upload-file").live("click", function(e){
                    e.preventDefault();

                    var this_obj = $(this);
                    var image_data = $(this_obj).parent().prev().find('img').attr('src');

                    $.post(
                        'send_image.php',
                        {
                            data: image_data,
                            filename: filename
                        }, function(response){  
                            $(this_obj).parent().prev().html(response);
                            $(this_obj).remove();
                        }
                    );

                    //console.log('ok');
                });

            });
        </script>
    </head>
    <body>
        <!-- Multiple dropzones -->
        <div class="dropzone">
            Drop files here
        </div>
        <div id="meta"></div>
        <div class="dropzone">
            Drop files here
        </div>
        <div id="meta"></div>
    </body>
</html>

PHP-код в send_image.php

<?php
$raw_data = $_POST['data'];

file_put_contents(
    'image123.jpg',
    base64_decode( 
        str_replace('data:image/jpeg;base64,', '', $raw_data)
    )
);
?>

<br>

<?php echo '<img style="max-width: 200px; max-height: 200px;" src="' . 'image123.jpg' . '">'; ?>

Ответ 2

Я написал расширение для своего приложения.

// Custom file drop extension
$.fn.extend({
    filedrop: function (options) {
        var defaults = {
            callback : null
        }
        options =  $.extend(defaults, options)
        return this.each(function() {
            var files = []
            var $this = $(this)

            // Stop default browser actions
            $this.bind('dragover dragleave', function(event) {
                event.stopPropagation()
                event.preventDefault()
            })

            // Catch drop event
            $this.bind('drop', function(event) {
                // Stop default browser actions
                event.stopPropagation()
                event.preventDefault()

                // Get all files that are dropped
                files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files

                // Convert uploaded file to data URL and pass trought callback
                if(options.callback) {
                    var reader = new FileReader()
                    reader.onload = function(event) {
                        options.callback(event.target.result)
                    }
                    reader.readAsDataURL(files[0])
                }
                return false
            })
        })
    }
})

И мы можем использовать его как это

// Event listener filedropper
$('.dropbox').filedrop({
    callback : function(fileEncryptedData) {
        // a callback?
    }
})

Изменить

Если вы хотите удалить несколько файлов, вы должны написать цикл for вокруг FileReader следующим образом:

...
if(options.callback) {
    for (i = 0; i < files.length; i++) {
        var reader = new FileReader()
        reader.onload = function(event) {
            options.callback(event.target.result)
        }
        reader.readAsDataURL(files[0])
    }
}
...

JSFiddle: http://jsfiddle.net/646xe1m2/