web-dev-qa-db-ja.com

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>
jqueryhtmldrag-and-drop
13
Jens Törnell

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>

send_image.phpの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' . '">'; ?>
11
Jens Törnell

アプリケーションの拡張機能を作成しました。

// 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?
    }
})

編集

複数のファイルを削除する場合は、次のようにFileReaderの周りにforループを作成する必要があります。

...
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/

16
Ron van der Heijden

törnell

あなたがコードを共有してくれてありがとう、それは私を大いに助けてくれました！ IEエッジが気になる他の人のために、@jens-törnellからの最後のコードとこの投稿に関するアドバイス jQuery.on（ "drop"）が起動しない

  jQuery(document).ready(function($){
    var filename = '';
    var image_data = '';
    $.event.props.Push('dataTransfer');

    $('.dropzone').on({
      dragover: function(e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).addClass('highlight');
        console.log("t3");
        return false; //crucial for 'drop' event to fire
       },
      dragleave: function(e) {
        e.stopPropagation();
        e.preventDefault();
        $(this).removeClass('highlight');
        return false;
       },
       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);
         return false;
       }
    });

    // 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(
           'upload-file.php',
           {
               data: image_data,
               filename: filename
           }, function(response){
               $(this_obj).parent().prev().html(response);
               $(this_obj).remove();
           }
       );

     console.log('ok');
 });
  <div class="dropzone" id="dropzone"><p>Drop files here to upload them.</p></div>
      <div id="meta"></div>
1
Rachael