JQuery - 拖动删除文件 - 如何获取文件信息？

Question

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

基本上我想要一个文件上传器,我的网站用户只需将文件从他们的计算机拖到我创建的div中,然后它就会将文件上传到所选目的地.

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

谷歌没有运气,只有插件.无论如何可以引导我朝着正确的方向前进吗？

更新 好的,所以我想出了如何做我想要的.只需将文件输入字段不透明度设置为1即可隐藏,您仍然可以将文件拖到该常规区域中,如果您点击文本字段,它将捕获它.但是,我想知道如何增加文件输入字段的高度/宽度(在文件上尝试了基本的css,但它只增加了'浏览'按钮的大小,而不是你可以将文件放入的实际字段.任何想法如何做到这一点？我基本上想要一个大的方形div,说'在这里删除文件'.所以我需要调整输入字段的大小.

Answer 1

只是在这里插一句，因为我最近几天也一直在这样做。据我了解，如果您通过 jQuery 绑定放置事件，则需要通过 jQuery提供的事件中event.dataTransfer的event.originalEvent对象来访问该对象。

例子：

在此我绑定到dragover以及drop事件，因为这是防止它执行默认操作所必需的（在此处找到解决方案：阻止默认操作。仅在 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）它的文件数组是空的，它是在此间指出，当ondrop触发event.dataTransfer.files是空的？

为了更好地回答 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 文件上传的核心。

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

Answer 2

您可以使用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
}

小提琴