jQuery HTML5文件拖放

我已经看了很多脚本，用于通过拖放式AJAX将图像上传到服务器。 我找到的脚本不是jQuery，非常大，并没有完全按照我的意愿行事。

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

我的问题

在许多示例中，我查看了e.dataTransfer.files的工作。 在我的情况下，它没有。 我需要以某种方式绑定它吗？

我想尽可能多地使用jQuery。

的jsfiddle

尽情玩耍……

http://jsfiddle.net/AMjEz/

码

   #dropzone { border: 2px dashed #ccc; width: 300px; height: 200px; }    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); } }); });    
 Drop files here 
   

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

Answer 2

我发现它是jQuery.1.8中的一个错误。 这一行应该在$('.dropzone') 。

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

最终的HTML代码

         
 Drop files here 
 
 
 Drop files here 
 
   

send_image.php中的PHP代码

  
 '; ?> 

Answer 3

törnell

谢谢你分享你的代码，这对我帮助很大！ 对于其他任何人发现IE边缘是一个麻烦这里是我从@ jens-törnell的最终代码和这篇post给出的建议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('Upload file'); $(this_obj).html(''); }; })(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'); }); 

  
Drop files here to upload them.