没有 AJAX 的 HTML5 拖放是否可能？ [复制]答案

【问题标题】：HTML5 drag N drop without AJAX is it possible? [duplicate]没有 AJAX 的 HTML5 拖放是否可能？ [复制]
【发布时间】：2012-06-07 21:19:16
【问题描述】：

我尝试制作一个没有 ajax 的 HTML5 上传器，因为我必须创建一个带有输入名称的目录。我试着让它像正常人一样工作

<input type="file" />

但是在正常上传时，我无法获取 $_FILES 中的 tmp_name。我可以只使用文件的 mozFullPath 上传吗？有我的代码，dropzone 运行良好。

<script>
    var filesUploaded = new Array();

    var dropZoneElement = document.getElementById("dropZone");

    dropZoneElement.addEventListener('dragleave', onDragLeave, false);
    dropZoneElement.addEventListener('dragenter', onDragEnter, false);
    dropZoneElement.addEventListener('dragover', onDragOver, false);
    dropZoneElement.addEventListener('drop', onDrop, false);

    function onDragLeave(event) {
        event.preventDefault();
        event.stopPropagation();
        //you can remove a style from the drop zone

    }

    function onDragEnter(event) {
        event.preventDefault();
        event.stopPropagation();
        //you can add a style to the drop zone
    }

    function onDragOver(event) {
        event.preventDefault();
        event.stopPropagation();
        event.dataTransfer.effectAllowed = "copy";
        event.dataTransfer.dropEffect = "copy";
    }

    function onDrop(event) {
        event.preventDefault();
        event.stopPropagation();
        console.log(event.dataTransfer);
        onFilesSelected(event.dataTransfer.files);
    }

    function onFilesSelected(files) {
        var dropZoneElement = document.getElementById("dropZone");
        for (var i=0; i<files.length; i++) {
            filename = files[i]['name'];
            filesrc = files[i]['mozFullPath'];
            filesize = files[i]['size'];
            filetype = files[i]['type'];
            filesUploaded[i] = filesrc;

            var span = document.createElement("span");
            span.setAttribute('class','fileUpload');
            dropZoneElement.appendChild(span);
            var reader = new FileReader();
            reader.onload = function (files) {
                span.innerHTML = '<i class="icon-file"></i> ' + filename;
            };
            reader.readAsDataURL(files[i]);
        }

    }
</script>

感谢大家的建议和帮助！

【问题讨论】：

Javascript 是客户端...不，如果没有服务器端脚本，就无法将某些内容保存到您的服务器。
没有 Ajax？当然可以，只要实现一个flash或者java app uploader就可以了。 :) 现在，如果您想在没有 flash/java 的情况下保持 HTML5 干净，请使用 Ajax。
@Daedalus - 这个问题没有说明不使用服务器端代码，而是说“没有 Ajax”。它被标记为“PHP”...
这里为什么有这么多的狂暴者？我只是说没有 Ajax，我去 -2... 我想要建议，我不想被拖钓或抨击。在标签中它说 PHP ！并且变量 $_FILES 是服务器端...
如果没有 Ajax 你仍然可以使用 iFrame hacks。

标签： php javascript jquery html file-upload

【解决方案1】：

不要在意这一切。只需使用FormData，它就会负责构建正确的标头，这意味着您将拥有正确的$_FILES 变量服务器端。

var datas = new FormData( 'form-name' );
filesUploaded.forEach( function( file, index ) {
    datas.append( 'file' + index, file );
} );

但是，你不得不通过 XHR 发送数据：

xhr.send( datas );

手动构造 DOM 文件输入元素似乎是不可能的。不过，你没有理由不使用 AJAX。

【讨论】：

【解决方案2】：

如果不使用XMLHttpRequest 和适当的序列化程序（例如FormData），这是不可能的。

如果你不想要 AJAX，你要么需要 Flash/Java，要么使用：

<input name="myfiles[]" type="file" multiple="multiple" />

【讨论】：

这不是我的问题...我已经得到了输入文件...变量 $_FILES 在服务器端...该死，这里的所有人都认为我们都是菜鸟...
@MikeBoutin 那么你的$_FILES 里面有什么？是空的吗？