2

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

谢谢大家的建议和帮助！

4

2 回答 2

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。

于 2012-06-08T12:42:26.310 回答
0

如果不使用XMLHttpRequest适当的序列化程序（例如FormData.

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

<input name="myfiles[]" type="file" multiple="multiple" />
于 2012-06-08T03:03:37.893 回答