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

问题描述

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

Interested in building my own drag'n'drop file uploader using JQuery/AJAX/PHP.

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

Basically I want a file-uploader that users of my site can just drag the file from their computer into a div I created, and it will then upload the file for them to the selected destination.

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

I would like to build this from scratch, and not use any plugins so that I can better manipulate the restrictions (file types, size, destination folders, etc.)

没有运气，只能插入谷歌。可以反过来引导我朝着正确的方向吗？

Have scoured google with no luck, only plugins. Can anyway steer me in the right direction?

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

UPDATE Ok, so I figured out how to do what I want. Just set the file input field opacity to 1 so it is hidden, and you can still drag a file into that general area and if you hit the text field it will catch it. HOWEVER, I would like to know how to increase the height/width on the file input field (tried basic css on the file, but it only increases the 'browse' button size and not the actual field where you can drop the file into. Any ideas how to do this? I basically want a big square div that says 'Drop file here'. So I need to resize the input field.

推荐答案

您可以使用HTML5 dragenter 和 dragleave 事件来创建一个dropzone。

然后通过在dropzone中放置文件输入并使用CSS隐藏文件，您可以在更改事件时上传文件以进行输入，像这样

You can use the HTML5 dragenter and dragleave events to create a dropzone.
Then by placing a file input inside the dropzone, and hiding it with CSS, you can upload the file when the change event for the input fires, like this

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

这篇关于JQuery - 拖放文件 - 如何获取文件信息？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！