JQuery - 拖放n拖放文件 - 如何获取文件信息？

Question

有兴趣使用JQuery/AJAX/PHP构建我自己的drag'n'drop文件上传器。

基本上我想要一个文件上传器，我的网站的用户可以将文件从他们的计算机拖到我创建的div中，然后它会将文件上传到选定的目的地。

我想从头开始构建这个，并且不使用任何插件，这样我可以更好地操纵限制

们寻遍谷歌没有运气（文件类型，大小，目标文件夹等），只插件。反正可以引导我走向正确的方向吗？

UPDATE 好吧，所以我想出了如何做我想做的。只需将文件输入字段不透明度设置为1，以便将其隐藏起来，并且仍然可以将文件拖入该常规区域，并且如果您点击文本字段，它将捕获该文件。然而，我想知道如何增加文件输入字段的高度/宽度（尝试基本的CSS文件，但它只增加了'浏览'按钮的大小，而不是你可以放入文件的实际字段。任何想法如何做到这一点？ 我基本上要一个大广场的div说“拖放文件在这里”，所以我需要调整输入字段。

Answer 1

您可以使用HTML5 dragenter和dragleave事件来创建一个悬浮窗。
然后通过将文件输入的悬浮窗内，并用CSS隐藏它，你可以上传文件时，change事件输入火灾，这样

var dropzone = $("#dropzone"), 
    input = dropzone.find('input'); 

dropzone.on({ 
    dragenter : dragin, 
    dragleave : dragout 
}); 

input.on('change', drop); 

function dragin(e) { //function for drag into element, just turns the bix X white 
    $(dropzone).addClass('hover'); 
} 

function dragout(e) { //function for dragging out of element       
    $(dropzone).removeClass('hover'); 
} 

function drop(e) { 
    var file = this.files[0]; 
    $('#dropzone').removeClass('hover').addClass('dropped').find('img').remove(); 

    // upload file here 
} 

FIDDLE

Answer 2

对于那些有兴趣，我发现这个教程/演示是有帮助的：http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/

基本上使用<span>覆盖默认的输入。

Answer 3

只是在这里叮叮当当，因为我一直在做这个以及最近几天。根据我的理解，如果你通过jQuery绑定drop事件，你需要通过在jQuery提供的事件中通过event.originalEvent对象来访问event.dataTransfer对象。

实施例：

在此我结合到两个dragover以及drop事件，这是必要的，以防止它在执行默认动作（发现溶液这里：Prevent the default action. Working only in chrome）

$('#dropzone').bind('dragover drop', function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    if (event.type == 'drop') { 
     console.log(event.originalEvent.dataTransfer.files); 
    } 
}); 

也有似乎有一个错误，如果你console.log()event.dataTransfer（或event.originalEvent.dataTransfer）它的文件数组是空的，这里指出：event.dataTransfer.files is empty when ondrop is fired?

为了更好地回答了OP的问题（我只注意到它的其余部分，我知道这是旧的，但有人可能会有所帮助）：

我的实现是在jQuery的，所以我希望这是正常的：

var files = []; 

// Attaches to the dropzone to pickup the files dropped on it. In mine this is a div. 
$("#dropzone").bind('dragover drop', function(event) { 
    // Stop default actions - if you don't it will open the files in the browser 
    event.stopPropagation(); 
    event.preventDefault(); 

    if (e.type == 'drop') { 
     files.push(event.originalEvent.dataTransfer.files); 
    } 
}); 

// Attach this to a an input type file so it can grab files selected by the input 
$("#file-input").bind('change', function(event) { 
    files.push(event.target.files); 
}); 

// This is a link or button which when clicked will do the ajax request 
// and upload the files 
$("#upload-button").bind('click', function(event) { 
    // Stop the default actions 
    event.stopPropagation(); 
    event.preventDefault(); 

    if (files.length == 0) { 
     // Handle what you want to happen if no files were in the "queue" on clicking upload 
     return; 
    } 

    var formData = new FormData(); 
    $.each(files, function(key, value) { 
     formData.append(key, value); 
    }); 

    $.ajax({ 
     url: 'upload-ajax', 
     type: 'POST', 
     data: formData, 
     cache: false, 
     dataType: 'json', 
     processData: false, // Don't process the files - I actually got this and the next from an SO post but I don't remember where 
     contentType: false, // Set content type to false as jQuery will tell the server its a query string request 
     success: function(data, textStatus, jqXHR) { /* Handle success */ }, 
     error: function(jqXHR, textStatus, errorThrown) { /* Handle error */ } 
    }); 

}); 

你也可以绑定到被接受的答案中的其他事件，例如使dropzone淡入，以便你可以看到它（这是我的图书馆的待办事项列表）。但是，这是我使用的实际ajax文件上传的核心。

我真的没有一个方便的方法来测试它，但实质上我是这么做的（我基本上从我制作的库中取出所有代码并将其调整为适合一般代码块在这里以一种容易理解的方式）。希望这可以帮助一些人。从这里开始，实际上很容易，可以添加文件队列列表，并且可以从队列中删除文件，所以这应该是一个很好的起点。