Fatal编程技术网
  • jquery/
  • jQuery HTML5文件拖放

jQuery HTML5文件拖放

jquery html

jQuery HTML5文件拖放,jquery,html,drag-and-drop,Jquery,Html,Drag And Drop,我已经看过许多使用AJAX拖放将图像上传到服务器的脚本。我发现的脚本不是jQuery，非常大，不能完全满足我的需要 将来，它应该使用jQuery、AJAX和PHP上传一个图像 我的问题 在许多示例中，我都看到了e.dataTransfer.files的工作原理。就我而言，没有。我需要把它绑起来吗 我尽可能地想要jQuery JsFiddle <html> <head> <style type="text/css">

我已经看过许多使用AJAX拖放将图像上传到服务器的脚本。我发现的脚本不是jQuery，非常大，不能完全满足我的需要

将来，它应该使用jQuery、AJAX和PHP上传一个图像

我的问题

在许多示例中，我都看到了e.dataTransfer.files的工作原理。就我而言，没有。我需要把它绑起来吗

我尽可能地想要jQuery

JsFiddle

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

<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>
你想玩多少就玩多少

代码

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

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


#下降区{
边框：2个虚线#ccc；
宽度：300px；
高度：200px；
}
jQuery（文档）.ready（函数（$）{
$（'#dropzone'）。在({
排水剂：功能（e）{
$（this.css（'background-color'，'lightBlue'）；
},
dragleave：函数（e）{
$（this.css（'background-color'，'white'）；
},
删除：功能（e）{
e、 停止传播（）；
e、 预防默认值（）；
console.log（例如dataTransfer.files）；
}
});
});
把文件放在这里
我发现这是jQuery.1.8中的一个bug。此行应在
$（'.dropzone'）
之前

最终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($) {
                $('#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>

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


.dropzone{
边框：2个虚线#ccc；
宽度：300px；
高度：200px；
}
jQuery（文档）.ready（函数（$）{
var filename=''；
var图像_数据=“”；
$.event.props.push（'dataTransfer'）；
$（'.dropzone'）。在({
排水剂：功能（e）{
$（this.css（'background-color'，'lightBlue'）；
},
dragleave：函数（e）{
$（this.css（'background-color'，'white'）；
},
删除：功能（e）{
e、 停止传播（）；
e、 预防默认值（）；
var file=e.dataTransfer.files[0]；
var fileReader=newfilereader（）；
var this_obj=$（this）；
fileReader.onload=（函数（文件）{
返回函数（事件）{
//预演
filename=file.name；
image_data=event.target.result；
$（this_obj）.next（）.html（“”）；
$（this_obj）.html（“”）；
};
})（文件）；
fileReader.readAsDataURL（文件）；
}
});
//上传文件
$（“.upload file”）.live（“单击”），函数（e）{
e、 预防默认值（）；
var this_obj=$（this）；
var image_data=$（this_obj）.parent（）.prev（）.find（'img'）.attr（'src'）；
美元邮政(
“send_image.php”，
{
数据：图像数据，
文件名：文件名
}，函数（响应）{
$（this_obj）.parent（）.prev（）.html（响应）；
$（此对象）.remove（）；
}
);
//console.log（'ok'）；
});
});
把文件放在这里
把文件放在这里
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' . '">'; ?>
我为我的应用程序编写了一个扩展

// 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])
    }
}
...

。。。
if（options.callback）{
对于（i=0；i
jshiddle:

törnell

谢谢分享你的代码，这对我帮助很大！对于那些认为IE edge是个麻烦的人，这里是我从@jens-törnell那里得到的最后一段代码，以及在这篇文章中给出的建议

jQuery（文档）.ready（函数（$）{
var filename=''；
var图像_数据=“”；
$.event.props.push（'dataTransfer'）；
$（'.dropzone'）。在({
德拉戈弗：功能（e）{
e、 停止传播（）；
e、 预防默认值（）；
$（this.addClass（'highlight'）；
控制台日志（“t3”）；
return false；//触发“drop”事件至关重要
},
dragleave：函数（e）{
e、 停止传播（）；
e、 预防默认值（）；
$（this.removeClass（'highlight'）；
返回false；
},
删除：功能（e）{
e、 停止传播（）；
e、 预防默认值（）；
var file=e.dataTransfer.files[0]；
var fileReader=newfilereader（）；
var this_obj=$（this）；
fileReader.onload=（函数（文件）{
返回函数（事件）{
//预演
filename=file.name；
image_data=event.target.result；
$（this_obj）.next（）.html（“”）；
$（this_obj）.html（“”）；
};
})（文件）；
fileReader.readAsDataURL（文件）；
返回false；
}
});
//上传文件
$（“。上传文件