jQuery HTML5 文件拖放答案

【问题标题】：jQuery HTML5 file drag and dropjQuery HTML5 文件拖放
【发布时间】：2023-03-19 15:35:02
【问题描述】：

我查看了许多使用 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>

【问题讨论】：

你检查过blueimp.github.com/jQuery-File-Upload吗？
是的，我有。事情太多了。我想要它很小。
我猜你两个都想要...files = event.originalEvent.target.files || event.originalEvent.dataTransfer.files
相关：stackoverflow.com/questions/166221/…

标签： jquery html drag-and-drop

【解决方案1】：

我为我的应用程序编写了一个扩展。

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

【讨论】：

谢谢 ;) 我想我已经做了与您的编辑相同的修改。当你这样做并看到一个有 5000 次重复的人这样做时，你知道它的乐趣吗？（我觉得我夸大了一点）
拯救了我的一天！！谢谢！

【解决方案2】：

我发现这是 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' . '">'; ?>

【讨论】：

添加dragover事件并取消所有事件。看到这个帖子：stackoverflow.com/a/19223442/641854

【解决方案3】：

托内尔

感谢您分享您的代码，它对我帮助很大！对于其他发现 IE 边缘的人来说，这是我从 @jens-törnell 获得的最终代码以及在这篇文章 jQuery.on("drop") not firing

上给出的建议

  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>

【讨论】：