JQuery -拖放文件-如何获取文件信息 - JQuery - Drag n Drop Files - How to get file info?

对使用JQuery/AJAX/PHP构建自己的拖放文件上传器感兴趣。

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

我想从头开始构建这个，并且不使用任何插件，以便我可以更好地操作限制(文件类型，大小，目标文件夹等)

搜索谷歌没有运气，只有插件。能指引我正确的方向吗?

好吧，我知道怎么做我想做的了。只需将文件输入字段的不透明度设置为1，这样它就被隐藏了，你仍然可以将文件拖到一般区域，如果你点击文本字段，它就会捕获它。然而，我想知道如何增加文件输入字段的高度/宽度(在文件上尝试了基本的css，但它只会增加"浏览"按钮的大小，而不是你可以把文件放入的实际字段。有什么办法吗?我想要一个大的正方形div，上面写着" Drop file here "所以我需要调整输入框的大小

在这里插话，因为我过去几天也一直在做这件事。据我所知，如果你通过jQuery绑定掉落事件，你需要通过jQuery提供的事件中的event.originalEvent对象来访问event.dataTransfer对象。

的例子:

在这里，我绑定到dragover和drop事件，因为这是必要的，以防止它执行默认操作(在这里找到解决方案:防止默认操作)。

$('#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)它的文件数组是空的，它在这里指出:事件. datattransfer .files是空的ondrop被触发?

为了更好地回答OPs的问题(我只是注意到它的其余部分，我知道它很旧，但有些人可能会觉得这很有帮助):

我的实现是在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文件上传的核心。

我真的没有一个方便的方法来测试它，但本质上我就是这样做的(我基本上从我一直在做的库中提取了所有的代码，并以一种容易理解的方式将其调整为适合这里的通用代码块)。希望这能帮助到一些人。从这里开始，实际上很容易继续添加文件队列列表，并能够从队列中删除文件，所以这应该是一个很好的起点。

你可以使用HTML5的dragenter和dragleave事件来创建一个dropzone
然后，通过在dropzone中放置一个文件输入，并用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
}

小提琴

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

基本上使用<span>来覆盖默认的输入字段