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.

基本上我想要一个文件上传我的网站的用户可以从他们的计算机只需拖动文件到我创建了一个分区，然后将他们的文件上传到选定的目的地。

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.

推荐答案

有一看看这个网站： http://base64img.com

，设有一个悬浮窗的下降只用JavaScript制作文件/ HTML5。

It features a dropzone for dropping files made only with javascript/html5.

中的JavaScript是pretty的向前伸直，与以下一些意见：

The javascript is pretty straight forward, below with some comments :

    var dropzone;  
            dropzone = document.getElementById("dropzone");  
            dropzone.addEventListener("dragenter", dragin, false);
            dropzone.addEventListener("dragleave", dragout, false);
            dropzone.addEventListener("dragover", b64.stopProp, false);
            dropzone.addEventListener("drop", drop, false);  

    function drop(e) {
        b64.stopProp(e);                              //custom preventdefault function
        handleFiles("dropped", e.dataTransfer.files); //function to handle the dropped file
    }

    function dragin(e) {  //function for drag into element, just turns the bix X white
        b64.stopProp(e);
        if ($("#previmg img").length) {
            $("#previBG, #bigassx, #pretext").addClass("dragged");
            $("#pretext").addClass("dragtxt");
        }
    }

    function dragout(e) { //function for dragging out of element                         
        b64.stopProp(e);
        if ($("#previBG").hasClass("dragged")) {
            $("#previBG, #bigassx, #pretext").removeClass("dragged"); 
            $("#pretext").removeClass("dragtxt");
        }
    }

该站点的整个脚本文件都可以在这里看到，怎么看文件的处理，以及它是如何工作：的 http://base64img.com/base64.js

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