Glisser et déposer un fichier jQuery HTML5

J'ai regardé de nombreux scripts pour télécharger des images vers le serveur avec l'AJAX avec un glisser-déposer. Les scripts que j'ai trouvé ne sont pas jQuery, sont assez grandes et de ne pas faire exactement ce que je veux.

Dans l'avenir, il devrait charger une image avec jQuery, AJAX et PHP.

Ma question

Dans beaucoup de l'exemple que j'ai regardé e.dataTransfer.les fichiers de travail. Dans mon cas, il n'est pas. Ai-je besoin de le lier en quelque sorte?

Je veux jQuery autant que possible.

JsFiddle

Jouer autant que vous le souhaitez...

http://jsfiddle.net/AMjEz/

Code

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

source d'informationauteur Jens Törnell | 2012-10-18

J'ai écrit une extension pour mon application.

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

Et nous pouvons l'utiliser comme ceci

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

Modifier

Si vous voulez supprimer plusieurs fichiers, vous devez écrire une boucle autour de la FileReader comme suit:

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

J'ai trouvé que c'est un bug dans jQuery.1.8. Cette ligne doit être avant $('.dropzone').

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

Code HTML Final

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

Code PHP dans 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' . '">'; ?>

Vous devez vous connecter pour publier un commentaire.