Question

我尝试制作一个没有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>

感谢大家的建议和帮助！

Answer 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。

Answer 2

如果不使用XMLHttpRequest和正确的序列化程序（例如FormData），则无法进行此操作。

如果您不想要AJAX，您需要使用Flash / Java或使用：

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

没有AJAX的HTML5拖放是可能的吗？

2 个答案: