2

入力名でディレクトリを作成する必要があるため、ajax なしで HTML5 アップローダーを作成しようとしています。普通に働けるように頑張ります

<input type="file" />

しかし、通常のアップロードの場合、 $_FILES にある tmp_name を取得できません。ファイルの mozFullPath だけでアップロードできますか? 私のコードがあります。ドロップゾーンはうまく機能します。

<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 に答える